How to use the Viewport Sizes Reference
- 1. See your viewportYour current CSS viewport, screen size and pixel ratio appear at the top.
- 2. Search devicesType iPhone, 360 or tablet, or filter by category.
- 3. DownloadSave the list as a text file for your test plan.
Reading the sizes
Each device lists its size in CSS pixels, the units your CSS and media queries use, and its device pixel ratio (DPR). The iPhone 16 is 393 × 852 CSS px · DPR 3: three physical pixels per CSS pixel each way, so its screen is 1179 × 2556 real pixels. Many Android phones, including the Galaxy S24 and many budget models common in India, report 360 px wide, so 360 is still a width to test.
The live line at the top shows your own browser right now, and updates as you resize the window.
Using this in testing
- Test the narrowest common widths, 360 and 375 px, for overflow and cramped text.
- The viewport height is smaller than the screen because of browser bars, and it changes as they hide on scroll; use dvh units when height matters.
- Windows laptops often run at 125% scaling, so a 1920 × 1080 screen gives a 1536 px wide viewport.
- Choose breakpoints where your layout breaks, not for named devices; device lists change every year.
Phone and tablet sizes are taken from the device descriptors in Playwright 1.63 (a browser-testing library) and checked in November 2026; laptop viewports are typical values that depend on browser and toolbars. Build fluid sizes with the CSS clamp generator and sketch layouts at these widths with the wireframe maker.
Frequently asked questions
What is device pixel ratio?
How many physical screen pixels make up one CSS pixel in each direction. A DPR of 3 needs images about three times wider for full sharpness.
Which widths should I design for first?
Design mobile-first at around 360–390 px, then check tablet (768 px) and laptop (1280–1440 px) widths.
Is the Viewport Sizes Reference free?
Yes, the Viewport Sizes Reference is free. The first time you download your first reference, you are asked for your name and WhatsApp number once. After that, this and every other Uncodemy tool opens straight away without the form.