Mobile Device Screen Viewports & Density Markdown Table Template
A viewport table is the bridge between a design file and a browser. Designers think in screens, developers write media queries in CSS pixels, and image pipelines need physical pixels. This table keeps all three numbers for each target device on one row, together with the device pixel ratio that converts between them and the aspect ratio that decides how much content fits above the fold.
Edit This Template
Edit cells, add rows, or sort — the Markdown updates livePaste cells from Excel or Google Sheets into the first header to replace the table · Tab / Enter / arrows move · Shift+F10 opens row & column actions
When to Use This Table
It gets used in three places: a responsive spec that says which widths a layout must handle, a QA test matrix that tells testers which devices or emulator presets to run, and image documentation that explains why a 400-pixel-wide hero needs a 1200-pixel source file. In each case the critical column is the CSS viewport. Media queries, vw units, and window.innerWidth all work in CSS pixels, so a breakpoint written against physical resolution will never fire where you expect.
The difference between a useful table and a misleading one is provenance. Marketing pages quote physical resolution; the CSS numbers depend on the device pixel ratio, the browser, and user settings such as display zoom, Android display size, or Windows scaling. A trustworthy table says where each value came from and when it was measured, and it treats the listed height as the screen, not the space a page actually gets once browser toolbars take their share.
Formatting This Table in Markdown
A mobile device screen viewports & density table puts a few things in cells that Markdown treats as syntax. These are the ones to watch so it renders correctly on GitHub, GitLab, Obsidian and docs sites.
Choose × or x, and keep numbers aligned
Write
402 x 874with the letter x if readers will search for it or type it into an emulator;×(U+00D7) looks better but will not match a search for x. Avoid*as a multiplication sign, because402*874and a later1206*2622in one cell can italicize the text between them. For aligned digits, split width and height into two numeric columns; see column alignment.Drop the @ from DPR values
A bare
@3xor@2.625xmay be read as a user mention in GitHub issues, pull requests and comments. The header already says DPR, so write3xor2.625xand keep the cell free of Markdown-significant characters.Inch marks can turn into curly quotes
A straight quote in
13"is safe in GFM, but Kramdown (used by GitHub Pages) and Pandoc may convert it to a curly closing quote. Write13-inchor the double prime ″ (U+2033) so the mark survives any renderer.
What Goes in Each Column
| Column | Alignment | What to put here |
|---|---|---|
| Device Model | left :--- | Exact model name, including size or generation where the family varies — “iPhone 15” and “iPhone 15 Plus” are different widths. Only group models on one row when every number is identical; iPhone 14 and iPhone 15, for example, are not. |
| CSS Viewport (px) | right ---: | Portrait width × height in CSS pixels, as reported by screen.width and screen.height with a width=device-width viewport meta tag. Right-aligned like any measurement. Note that the usable page height is smaller than this figure. |
| Physical Resolution | right ---: | The hardware panel in device pixels, portrait orientation, from the manufacturer spec. It should equal the CSS size multiplied by the DPR, give or take rounding; if it doesn’t, one of the two numbers is wrong or a scaled display mode is active. |
| DPR Scale | center :---: | The value of window.devicePixelRatio. Apple’s @2x/@3x asset notation is fine for iOS, but Android ratios are often fractional (2.625, 3.5), so write the decimal when it isn’t a whole number. |
| Aspect Ratio | center :---: | Long side to short side, in the conventional marketing form such as 19.5:9. These are rounded labels; compute physical height ÷ width if you need the exact ratio for layout maths, and keep the values centered as short tokens. |
How to Fill It In
- 1Pick devices from your own analytics first. The screen-size report in your analytics tool tells you which CSS widths real visitors use; a table built from flagship launch lists over-represents expensive phones.
- 2Get physical resolution from the manufacturer’s technical specifications page, then derive or confirm the CSS size. Apple publishes point sizes for each iPhone in its design resources; for Android the DPR depends on the panel and the selected display resolution.
- 3Verify on hardware or a cloud device lab by loading a tiny page that prints
screen.width,screen.height,innerWidth, anddevicePixelRatio. Record the browser and OS version alongside the result. - 4Check that physical ≈ CSS × DPR for every row. A mismatch usually means a zoomed display mode, a non-default Samsung resolution setting, or a copy-paste error from a spec sheet.
- 5Date the table and review it with each major phone release cycle. Link it from your breakpoint reference so designers can see which devices fall on which side of each breakpoint.
Ready-to-Paste Variations
QA width matrix
A device-agnostic test plan. Testers resize to each CSS width in DevTools, which catches layout bugs without owning every phone.
| CSS width (px) | Represents | What to check |
| ---: | :--- | :--- |
| 320 | WCAG reflow minimum, small or zoomed phones | No horizontal scroll, text not clipped |
| 360 | Many mid-range Android phones | Navigation fits, tap targets not crowded |
| 393 | iPhone 15, iPhone 16 | Typical iOS layout, safe-area insets |
| 768 | Tablet portrait | Two-column layouts switch correctly |
| 1280 | Laptop, or 1920 screen at 150% scaling | Desktop navigation and max content width |Image source sizes by DPR
Use when writing srcset guidance. The image width needed is the rendered CSS width multiplied by the device pixel ratio.
| Rendered width (CSS px) | DPR | Source image width (px) |
| ---: | :---: | ---: |
| 400 | 1 | 400 |
| 400 | 2 | 800 |
| 400 | 3 | 1200 |
| 1200 | 2 | 2400 |Measured values log
Records what the browser actually reported, which is what your CSS sees. Add one row per device and browser combination you test on.
| Device | Browser | `screen.width` | `innerWidth` | `devicePixelRatio` | Measured |
| :--- | :--- | ---: | ---: | ---: | :---: |
| iPhone SE (3rd gen) | Safari | 375 | 375 | 2 | 2026-09-14 |
| iPhone 16 Pro Max | Safari | 440 | 440 | 3 | 2026-09-14 |
| Pixel 8 | Chrome | 412 | 412 | 2.625 | 2026-09-15 |Common Mistakes
Writing media queries against physical resolution, such as
@media (min-width: 1179px)for an iPhone.Media queries use CSS pixels. That iPhone is 393 CSS pixels wide, so the query should target widths in the 390–430 range, or better, target content needs rather than specific devices.
Treating the CSS viewport height as the space available to the page.
Browser address bars, tab bars, notches, and home indicators all take height. Test with the dynamic viewport units
dvh,svh, andlvh, and never size a critical button against the raw screen height.Listing a 1920 × 1080 laptop as a 1920-pixel CSS viewport.
Many Windows laptops ship with 125% or 150% display scaling, which gives 1536 or 1280 CSS pixels and a DPR of 1.25 or 1.5. Record the scaling setting next to desktop rows.
Forgetting the viewport meta tag when measuring.
Without
<meta name="viewport" content="width=device-width, initial-scale=1">, mobile browsers lay pages out at a wide virtual width (around 980 pixels) and your measurements describe that fake viewport instead of the device.
Related Markdown Table Templates
Browse all 50 templatesTailwind CSS & Responsive Viewport Breakpoints
Reference table for Tailwind CSS responsive screen utility prefixes, pixel min-widths, the media queries they compile to, target device categories, and layout widths.
Digital Storage Units & Typography Scales
Reference conversion chart for digital data storage units (binary IEC vs decimal SI) and responsive typography pixels-to-rem scales.
Regular Expression (RegEx) Syntax Reference
Comprehensive cheat sheet for regular expression metacharacters, character classes, quantifiers, anchors, and lookaround assertions.
Mobile Device Screen Viewports & Density: Frequently Asked Questions
What is the difference between CSS pixels and device pixels?
A CSS pixel is a layout unit defined to look roughly the same size on every screen; a device pixel is one physical dot on the panel. On a DPR 3 phone, each CSS pixel is drawn with a 3 × 3 block of device pixels, which is why text looks sharp.
Why do different websites list different viewports for the same Android phone?
Android lets users change display size and, on many Samsung models, the rendering resolution. Both change the DPR and therefore the CSS width. Lists copied from a spec sheet rarely say which setting was assumed, so measure on a device with default settings.
Should breakpoints match popular devices?
Use device widths to sanity-check breakpoints, not to define them. Choose breakpoints where your layout starts to look cramped, then confirm that common widths such as 360, 393, and 768 fall comfortably inside a range rather than right on an edge.
How often does this kind of table go out of date?
Every flagship cycle adds new sizes, and older models drop out of your analytics within a few years. Reviewing the table once or twice a year, driven by your own traffic data, keeps it accurate without chasing every launch.