Viewport Bookmarklet

Add a lightweight ScreenSize overlay to most pages you are debugging. It shows viewport size, DPR, breakpoints and overflow without installing an extension.

No install Shadow DOM overlay No analytics

Install

Drag this button to your bookmarks bar. Click it on a page you are debugging to toggle the ScreenSize overlay.

ScreenSize Overlay

If drag-and-drop is blocked by your browser, copy the code and create a bookmark manually.

Bookmark URL

javascript:(()=>{const s=document.createElement('script');s.src='https://screensize.net/bookmarklet/v1.js';s.referrerPolicy='no-referrer';s.onerror=()=>alert('ScreenSize overlay could not load. This page may block external bookmarklet scripts with Content Security Policy.');document.body.appendChild(s)})()

Viewport

window.innerWidth and innerHeight in CSS pixels.

DPR

window.devicePixelRatio for image and screenshot debugging.

Breakpoints

Current Tailwind and Bootstrap ranges.

Overflow

Document width compared with the viewport width.

Privacy model

The bookmarklet fetches one static JavaScript file from ScreenSize.net with a no-referrer policy where the browser supports it, then runs locally on the page. It does not actively send measurements, DOM content, page URLs or user identifiers back to the server. Some sites block external bookmarklet scripts with Content Security Policy; in that case the loader shows a failure message instead of silently doing nothing.

Frequently asked questions

› What does the bookmarklet measure?

It measures the current page's viewport, screen, DPR, active Tailwind and Bootstrap breakpoints, document width and horizontal overflow.

› Does the bookmarklet collect page data?

No. The script runs in your browser, requests the overlay script with no-referrer where supported, and does not actively send the page URL, viewport, DOM content or measurements back to ScreenSize.net.

› Why use a bookmarklet instead of an embedded widget?

A bookmarklet works on the page you are actively debugging, so it is more useful for day-to-day responsive QA than a widget embedded on one site.

Related tools

Viewport Size Checker

See your browser's CSS viewport size and window size live. Updates as you resize — with current responsive breakpoint for developers.

Responsive Breakpoint Checker

Check the current responsive breakpoint live, compare Tailwind and Bootstrap defaults, and copy media queries for common viewport widths.

Responsive Design Testing

Test common responsive design scenarios against your live viewport: navigation, grids, forms, modals, galleries, data tables and dashboards.

Responsive Image Calculator

Calculate responsive image export sizes from CSS pixels and DPR. Generate srcset, sizes and CSS image-set snippets for crisp images.