Viewport Size

About

Viewport Size — Responsive Design Helper

Viewport Size is a lightweight Chrome extension built for web developers and designers who work with responsive layouts. It displays the current browser window width and height in real time, shows your active CSS breakpoint, and lets you instantly resize the browser to any target width — all without leaving the page you're working on.

  ---
  HOW IT WORKS

A small floating indicator appears on screen whenever you resize the browser window. It shows the exact viewport dimensions with clean formatting (e.g. 1 440 × 900 px) alongside the current CSS breakpoint label (XS, SM, MD, LG, XL, 2XL). The indicator automatically fades out after 2.5 seconds and stays completely out of your way when you're not resizing.
 ---

KEY FEATURES

► Real-time dimensions
  The indicator updates live as you drag the browser window edge. Width and height are displayed instantly with no lag, giving you accurate readings at any size.

► CSS Breakpoint detection
See your current breakpoint at a glance. Each breakpoint is color-coded for fast recognition:
  • XS — gray (below SM)
  • SM — blue
  • MD — green
  • LG — yellow
  • XL — purple
  • 2XL / XXL — pink

When you cross a breakpoint boundary, the badge flashes and scales up briefly so you never miss the transition.

► Tailwind CSS and Bootstrap presets
Switch between Tailwind CSS and Bootstrap 5 breakpoint systems directly in the settings popup. The indicator and breakpoint list update instantly.

Tailwind CSS breakpoints:
  • XS — below 640px
  • SM — 640px and up
  • MD — 768px and up
  • LG — 1024px and up
  • XL — 1280px and up
  • 2XL — 1536px and up

Bootstrap 5 breakpoints:
  • XS — below 576px
  • SM — 576px and up
  • MD — 768px and up
  • LG — 992px and up
  • XL — 1200px and up
  • XXL — 1400px and up

► One-click @media query copy
Click anywhere on the indicator to instantly copy a ready-to-use media query to your clipboard:
@media only screen and (max-width: 1440px) {

No more typing breakpoint values by hand. The badge briefly shows "copied!" in green to confirm.

► Instant window resize buttons
The popup includes quick-resize buttons that set your browser window to exact widths used in responsive design:
  • 600px
  • 768px
  • 820px
  • 1024px
  • Full — maximizes the window to fill the entire screen

This is especially useful when you need to test your layout at a specific breakpoint without manually dragging the window edge.

► Dark and Light themes
Choose between a dark theme (dark background, light text) or a light theme (white background, dark text) to ensure the indicator is always readable against any page background.

► 4 corner positions
Place the indicator exactly where it is least intrusive for your workflow:
  • Top Left
  • Top Right (default)
  • Bottom Left
  • Bottom Right

► Auto-hide behavior
The indicator is invisible on page load and only appears when you actively resize the window. It fades out smoothly 2.5 seconds after you stop resizing, keeping your screen clean the rest of the time.

► Number formatting
Large values are formatted with a thin space separator for easy reading — 1 440 instead of 1440.

► Settings sync
All preferences (position, theme, breakpoint preset, enabled state) are saved via chrome.storage.sync and automatically synced across all your Chrome devices.
  ---

WHO IS THIS FOR
  • Front-end developers building responsive websites
  • UI/UX designers checking layout behavior at different screen sizes
  • Anyone working with CSS media queries and breakpoints daily
  ---

PRIVACY
Viewport Size does not collect, transmit, or store any personal data. It does not communicate with any external servers. All settings are stored locally via Chrome's built-in storage API.
  ---

PERMISSIONS USED
  • storage — to save your settings
  • scripting + activeTab — to inject the viewport indicator on pages
  • windows — to resize the browser window when using the quick-resize buttons