Viewport Resizer

Quickly resize your browser window to popular desktop and laptop screen sizes.

Viewport Resizer — Instantly Resize Your Browser Window to Any Screen Size Viewport Resizer is a lightweight, fast, and privacy-friendly Chrome extension that lets web developers, designers, and QA testers resize their browser window to popular desktop and laptop screen resolutions with a single click. Stop guessing, stop dragging, and stop doing mental math with window dimensions. Just click a preset and your browser window snaps to the exact resolution you need. Whether you are building a responsive website, debugging CSS media queries, testing a web application across different screen sizes, or preparing screenshots at specific resolutions, Viewport Resizer gives you instant access to the most commonly used desktop and laptop viewport sizes — all from a clean, minimal popup interface. ──────────────────────────────────────── WHY VIEWPORT RESIZER? Responsive web design is the standard for modern web development. Every website, web app, and landing page needs to look great on a wide range of screen sizes. But testing responsive layouts is tedious. Chrome DevTools device mode is powerful but slow to toggle. Manually dragging the browser window edge is imprecise. And remembering the exact pixel dimensions of popular screens? Nobody has time for that. Viewport Resizer solves this with a dead-simple workflow: click the extension icon, pick a resolution, and your browser window resizes instantly. No configuration. No setup. No learning curve. It works the moment you install it. ──────────────────────────────────────── FEATURES AT A GLANCE One-Click Window Resizing Click any preset in the popup menu and your browser window immediately resizes to that exact resolution. The popup closes automatically after resizing so you can get right back to work. No extra steps, no confirmation dialogs, no friction. Live Dimension Overlay Every time your browser window is resized — whether by clicking a preset or by manually dragging the window edge — a small, unobtrusive overlay appears in the bottom-right corner of the page showing the current window dimensions. The overlay automatically fades away after a moment. This gives you real-time feedback on your window size without opening DevTools or any other tool. Current Size Detection When you open the Viewport Resizer popup, it immediately shows your current browser window dimensions at the top. If your window already matches one of the presets, that preset is highlighted so you always know exactly where you are. Works on Maximized Windows Many resize tools silently fail when the browser is maximized because the operating system locks the window size. Viewport Resizer automatically un-maximizes the window before applying the new dimensions, so it works reliably every time — even if your browser is in a maximized or snapped state. No Permissions Required Viewport Resizer does not request access to your browsing data, your tabs, your history, or any other sensitive information. The core resize functionality uses the Chrome windows API, which requires zero special permissions. The only additional capability is a lightweight content script that displays the dimension overlay on the page — and that script does nothing except create a temporary visual indicator. It does not read, collect, or transmit any data from the pages you visit. Minimal and Fast The entire extension is under 10 KB. There is no background service worker consuming resources when you are not using it. There are no analytics, no tracking, no telemetry, and no network requests. It loads instantly and runs entirely on your local machine. ──────────────────────────────────────── BUILT-IN PRESET RESOLUTIONS Viewport Resizer comes preloaded with the most popular desktop and laptop screen resolutions used worldwide. These presets cover the vast majority of real-world screen sizes you will encounter when building and testing responsive websites: Full HD — 1920 x 1080 The most widely used desktop monitor resolution worldwide. This is the baseline resolution for most modern websites and the default resolution of countless monitors, external displays, and all-in-one desktops. If you test at only one resolution, this should be it. QHD / 2K — 2560 x 1440 The standard resolution for 27-inch monitors and high-end gaming displays. Increasingly common as display technology improves and prices drop. Important for testing layouts that may behave differently at wider viewports with more horizontal space. HD+ Laptop — 1366 x 768 One of the most common laptop screen resolutions globally, especially in budget and mid-range notebooks. This resolution has been the default for 14-inch and 15.6-inch laptops for over a decade. Critical for testing because many users browse at this size. WXGA+ Laptop — 1440 x 900 A popular resolution for older MacBook models and many Windows ultrabooks. Still widely used across enterprise laptops and refurbished machines. Testing at this resolution helps catch layout issues that appear between the common 1366 and 1920 breakpoints. HD+ Scaled — 1536 x 864 The effective resolution seen by users running Windows laptops at 125% display scaling on a 1920x1080 panel. This is extremely common in the real world because Windows defaults to 125% scaling on many 15.6-inch Full HD laptops. Many developers miss this resolution entirely, making it a frequent source of undetected layout bugs. HD 720p — 1280 x 720 The classic 720p HD resolution. Still relevant for smaller laptop screens, embedded displays, and digital signage. Also useful as a minimum desktop viewport for testing how your layout degrades at smaller desktop sizes before hitting tablet breakpoints. SXGA — 1280 x 800 A common resolution for 13-inch laptops and older MacBook models. This was the standard MacBook resolution for years and is still found on many machines in active use. Useful for testing layouts targeted at smaller laptop screens. WXGA+ — 1600 x 900 Found on many 17-inch laptops and some 20-inch desktop monitors. This resolution sits between the common 1366 and 1920 breakpoints and is useful for catching layout issues in that intermediate range. Often overlooked in responsive testing. 4K / UHD — 3840 x 2160 The ultra-high-definition standard for premium monitors and large displays. While most 4K users browse with display scaling enabled (effectively seeing a lower resolution), testing at native 4K helps verify that images, icons, and vector graphics render crisply on high-DPI screens and that no layout assumptions break at very wide viewports. MacBook Pro 14-inch — 1512 x 982 The default scaled resolution of the 14-inch MacBook Pro with M-series chips. Apple's default display scaling means this is the effective viewport size most 14-inch MacBook Pro users see in their browser. Essential for testing if your audience includes Mac users. MacBook Pro 16-inch — 1728 x 1117 The default scaled resolution of the 16-inch MacBook Pro with M-series chips. Like the 14-inch model, Apple's display scaling means this is the actual viewport size your website will be rendered at for most 16-inch MacBook Pro users. A must-test resolution for any website targeting creative professionals, developers, or enterprise Mac users. ──────────────────────────────────────── WHO IS VIEWPORT RESIZER FOR? Front-End Developers Quickly test responsive breakpoints without opening DevTools device mode. Verify that CSS media queries trigger correctly at real-world resolutions. Check layout behavior at the exact screen sizes your users actually have. Web Designers Preview designs at specific resolutions to verify that your mockups translate correctly to the browser. Catch spacing, alignment, and overflow issues that only appear at certain viewport widths. QA Engineers and Testers Add specific viewport sizes to your manual testing checklist. Verify bug reports that reference specific screen resolutions. Reproduce layout issues reported by users on specific devices. Product Managers and Stakeholders Quickly view your product at different screen sizes during reviews, demos, and presentations without needing developer tools or technical knowledge. Content Creators and Bloggers Check how your articles, images, and embedded media look on different screen sizes before publishing. Ensure your content is readable and well-formatted across common resolutions. Screenshot and Documentation Teams Capture pixel-perfect screenshots at exact resolutions for documentation, marketing materials, app store listings, and client deliverables. ──────────────────────────────────────── HOW TO USE VIEWPORT RESIZER Step 1: Install the Extension Click "Add to Chrome" on this page. No configuration or setup is needed. The extension is ready to use immediately. Step 2: Navigate to Any Website Open any website or web application you want to test. Viewport Resizer works on any web page served over HTTP or HTTPS. Step 3: Click the Extension Icon Click the Viewport Resizer icon in your Chrome toolbar. A popup appears showing your current window dimensions and a list of preset screen sizes. Step 4: Click a Preset Click any resolution preset in the list. Your browser window instantly resizes to that exact dimension and the popup closes automatically. A small overlay briefly appears on the page confirming the new dimensions. Step 5: Drag to Resize (Optional) You can also manually drag your browser window edge to any custom size. The dimension overlay will appear in real time as you drag, showing you the exact dimensions as the window changes size. That is it. No accounts to create, no settings to configure, no tutorials to watch. ──────────────────────────────────────── PRIVACY AND SECURITY Viewport Resizer is built with a privacy-first approach. Here is exactly what the extension does and does not do: What it does: - Reads your current browser window dimensions to display them in the popup - Resizes your browser window when you click a preset - Injects a small content script on web pages that listens for resize events and displays a temporary dimension overlay What it does NOT do: - Does not read, access, or collect any data from the web pages you visit - Does not track your browsing history or behavior - Does not make any network requests or send data to any server - Does not use analytics, telemetry, or any third-party services - Does not store any data locally or remotely - Does not require you to create an account or sign in The extension is fully open source. You can inspect every line of code to verify these claims. ──────────────────────────────────────── TECHNICAL DETAILS Manifest Version: 3 (latest Chrome extension standard) Size: Under 10 KB total Background Processes: None — no background service worker APIs Used: chrome.windows (resize), content script (overlay display) Permissions: Content script on all URLs for dimension overlay only Compatibility: Chrome 88 and later Updates: Automatic through the Chrome Web Store ──────────────────────────────────────── FREQUENTLY ASKED QUESTIONS Does Viewport Resizer change the viewport size or the window size? It changes the outer browser window dimensions using the chrome.windows API. The actual viewport (the area where the web page renders) will be slightly smaller due to the browser chrome (toolbar, address bar, tab strip, bookmarks bar). This matches real-world conditions — when a user has a 1920x1080 monitor, their browser viewport is also smaller than 1920x1080 due to the browser UI. Why does my window not resize to the exact dimensions I selected? Your operating system may enforce minimum or maximum window sizes. For example, Windows prevents windows from being larger than the current display resolution, and most operating systems enforce a minimum window width. If the target resolution is larger than your physical screen, the window will resize to the maximum allowed size. Does it work on Chrome OS, Windows, Mac, and Linux? Yes. Viewport Resizer uses the standard chrome.windows API which is available on all desktop platforms that support Chrome extensions. Can I add custom resolutions? The current version includes a curated set of the most popular desktop and laptop resolutions. Custom presets may be added in a future update. Does the dimension overlay appear on every page? The content script is injected on all web pages, but the overlay only appears when the window is being resized. It is invisible during normal browsing and does not affect page performance or functionality. Does it work on chrome:// pages? Chrome does not allow extensions to inject content scripts on chrome:// pages (like chrome://settings or chrome://extensions). The window will still resize correctly when you click a preset, but the dimension overlay will not appear on these restricted pages. ──────────────────────────────────────── COMPARE: VIEWPORT RESIZER VS OTHER APPROACHES Chrome DevTools Device Mode DevTools device mode is powerful but emulates mobile viewports — it does not actually resize the browser window. This means browser chrome, scrollbars, and OS-level rendering differences are not reflected. Viewport Resizer changes the real browser window, giving you a true representation of what users see on actual desktop and laptop screens. Use DevTools for mobile emulation and Viewport Resizer for desktop and laptop resolution testing. Manually Dragging the Window Edge Dragging is imprecise and slow. You cannot reliably hit exact pixel dimensions by hand, and you have no visual feedback showing the current size unless you open DevTools. Viewport Resizer gives you one-click precision and a live dimension overlay while dragging. Other Window Resizer Extensions Many browser resize extensions are outdated, built on Manifest V2 (which Chrome is deprecating), request unnecessary permissions, or include analytics and tracking. Viewport Resizer is built on Manifest V3 with zero unnecessary permissions, no tracking, no analytics, and no background processes. It is fast, minimal, and respects your privacy. Operating System Window Snapping Windows snap (Win+Arrow), macOS window management, and third-party tiling tools are great for productivity but only snap to halves, thirds, or quarters of your screen. They do not let you set exact pixel dimensions. Viewport Resizer gives you precise control over the exact width and height of your browser window, which is essential for accurate responsive design testing and pixel-perfect screenshot capture.