GetViewport

A lightweight, performant viewport detection library for modern web applications

GitHub npm Documentation

Live Viewport Demo

Current breakpoint:
Width:
Type:
xs sm md lg xl xxl

Key Features

📱

Responsive Detection

Automatically detects viewport changes and provides current breakpoint information

⚡️

Performance First

Uses CSS variables for efficient viewport tracking without JavaScript polling

🎯

Simple API

Intuitive methods for checking viewport status and device type

Installation

npm Install via npm 

npm install @peterbenoit/get-viewport
// CommonJS
const GetViewport = require('@peterbenoit/get-viewport');

// ES Module (with a bundler)
import GetViewport from '@peterbenoit/get-viewport';

const viewport = new GetViewport();
console.log(viewport.getBreakpoint());

CDN Include via CDN (unpkg) 

<script src="https://unpkg.com/@peterbenoit/get-viewport/getViewport.js"></script>
<script>
  const viewport = new GetViewport();
  console.log(viewport.getBreakpoint());
</script>

Adds window.GetViewport as a global — no bundler required.

Manual Download and host yourself 

<script src="/path/to/getViewport.js"></script>

Download getViewport.js from GitHub and serve it with your project.

Quick Start

// 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
});

Breakpoints

Breakpoint Min Width Category
xs 0px Mobile
sm 576px Mobile
md 768px Tablet
lg 992px Desktop
xl 1200px Desktop
xxl 1400px Desktop