Viewport Size Reference
Browse and compare common device viewport sizes for responsive web design. Search, sort, filter, and export device screen dimensions.
About This Tool
The Viewport Size Reference is a comprehensive, browser-based tool that lists over 60 common device viewport sizes used in responsive web design. It covers smartphones, tablets, laptops, desktops, smartwatches, and TV screens with accurate CSS pixel dimensions, device pixel ratios (DPR), physical pixel resolutions, and aspect ratios for each device.
Responsive design requires developers to understand how their layouts behave across a wide range of screen sizes. This tool provides a single, searchable reference for the viewport dimensions of popular devices from Apple, Samsung, Google, and other manufacturers. Whether you are writing CSS media queries, testing with browser DevTools, or planning breakpoints for a design system, having accurate viewport data at your fingertips saves time and reduces guesswork.
The tool also displays your current browser viewport in real time, including width, height, DPR, and orientation. This is useful for quick sanity checks when building responsive layouts. You can compare multiple devices visually using scaled rectangles that show relative size differences at a glance.
A dedicated breakpoints section shows the default responsive breakpoints for Tailwind CSS, Bootstrap 5, and Material UI. These are the most widely used CSS frameworks, and knowing their breakpoint values helps you align your custom media queries with established conventions. If you work with CSS units, check out the px-rem converter for quick unit conversions.
Every device entry can be copied individually, and the full filtered table can be exported as CSV or JSON for use in test automation scripts, documentation, or design specifications. If you need to build responsive layouts visually, the CSS Layout Generator is a great companion tool. For color-related responsive considerations, try the Color Converter.
All processing happens entirely in your browser. No data is sent to any server. The device database is bundled directly into the page, so the tool works offline and loads instantly.
How to Use
- Browse the device table to find viewport dimensions for a specific device. Use the category tabs (Mobile, Tablet, Laptop, Desktop, Watch, TV) to filter the list.
- Type a device name in the search box to quickly find a specific model (e.g., "iPhone 15" or "Galaxy S24").
- Click any column header to sort the table by that column. Click again to reverse the sort order.
- Click the Copy button on any row to copy that device's viewport info to your clipboard.
- Use the CSV or JSON export buttons to download the currently filtered device list for use in test scripts or documentation.
- Open the Visual Size Comparison section and select up to 6 devices to see scaled rectangles showing their relative viewport sizes.
- Scroll down to the Popular Framework Breakpoints section to reference default breakpoints for Tailwind CSS, Bootstrap 5, and Material UI. Press Ctrl+Shift+C to quickly export the current view as CSV.
Popular Viewport Size Examples
FAQ
What is a CSS viewport?
A CSS viewport is the visible area of a web page in the browser window, measured in CSS pixels. It determines how media queries evaluate and how percentage-based layouts are calculated. The viewport size differs from the physical screen resolution because of the device pixel ratio (DPR). For example, an iPhone 15 has a CSS viewport of 393x852 but a physical resolution of 1179x2556 at 3x DPR.
What is DPR (Device Pixel Ratio)?
DPR is the ratio between physical hardware pixels and CSS (logical) pixels. A DPR of 2 means each CSS pixel is rendered using a 2x2 grid of physical pixels (4 total). Higher DPR screens display sharper text and images but require higher-resolution assets for crisp rendering. Most modern smartphones have a DPR of 2 or 3.
How do I use these sizes for responsive testing?
You can use these viewport dimensions in browser DevTools (Chrome, Firefox, Safari) by entering the width and height in the device toolbar. Most testing frameworks like Playwright, Cypress, and Puppeteer also accept viewport dimensions as configuration options. Export the table as JSON to automate testing across multiple device sizes.
Are these CSS pixel sizes or physical pixel sizes?
The Width and Height columns show CSS pixel sizes (also called logical pixels or device-independent pixels). These are the values you use in media queries and CSS. The Physical Pixels column shows the actual hardware resolution, calculated by multiplying CSS pixels by the DPR.
How often is the device list updated?
The device list includes the most popular devices as of 2025-2026, covering recent iPhone, Samsung Galaxy, Google Pixel, iPad, MacBook, and other models. New devices are added periodically. If you notice a missing device, the tool provides export functionality so you can add custom entries to your own reference.
Is my data safe?
Yes. This tool runs entirely in your browser. No data is sent to any server. The device database is static and bundled into the page. Your current viewport dimensions are read using standard browser APIs (window.innerWidth, window.innerHeight, window.devicePixelRatio) and never transmitted anywhere.
What is the difference between viewport width and screen width?
Viewport width (window.innerWidth) measures the visible content area of the browser, excluding scrollbars, toolbars, and the address bar. Screen width (screen.width) measures the total display resolution. For responsive design, viewport width is what matters because it determines how CSS media queries evaluate and how your layout is rendered.
Related Tools
Flexbox Playground
Experiment with all CSS Flexbox properties visually. Configure container and item settings with live preview and generated CSS code.
CSS Variable Generator
Design color theme systems with CSS custom properties. Auto-generate shade scales, semantic tokens, and dark mode variants.
Color Converter
Convert colors between HEX, RGB, HSL formats with contrast checker and palette generator.
px ↔ rem Converter
Convert between px, rem, and em CSS units with a configurable base font size and quick-reference table.
CSS Layout Generator
Visually build Flexbox and CSS Grid layouts with live preview and generated CSS code.
Tailwind CSS Converter
Convert plain CSS to Tailwind CSS utility classes. Paste CSS rules and get equivalent Tailwind classes instantly.
Font Stack Builder
Build CSS font-family stacks with drag-and-drop reordering, live preview, and popular presets for system, serif, sans-serif, and monospace fonts.
CSS @media Query Builder
Build CSS media queries visually with support for width, height, orientation, and more.
CSS Container Query Builder
Build CSS container queries visually with container type, name, and size conditions.