A lightweight, performant viewport detection library for modern web applications
Automatically detects viewport changes and provides current breakpoint information
Uses CSS variables for efficient viewport tracking without JavaScript polling
Intuitive methods for checking viewport status and device type
// Initialize the viewport detector
const viewport = new GetViewport();
// Get current breakpoint and dimensions
console.log(viewport.getBreakpoint()); // e.g. 'md'
console.log(viewport.getWidth() + 'x' + viewport.getHeight());
// Check device type
if (viewport.isMobile()) {
// Mobile-specific logic
} else if (viewport.isTablet()) {
// Tablet-specific logic
} else if (viewport.isDesktop()) {
// Desktop-specific logic
}
// Use with custom breakpoints
const customViewport = new GetViewport({
small: 0,
medium: 768,
large: 1200
});| Breakpoint | Min Width | Category |
|---|---|---|
| xs | 0px | Mobile |
| sm | 576px | Mobile |
| md | 768px | Tablet |
| lg | 992px | Desktop |
| xl | 1200px | Desktop |
| xxl | 1400px | Desktop |