How to use the device screen sizes
- 1Search for a device or filter by phones, tablets, laptops or monitors.
- 2Click a row to see its screen drawn to scale, with viewport, physical pixels and aspect ratio.
- 3Switch between portrait and landscape to flip the measurements.
- 4Use the width ruler to see how common phone and tablet widths are spread from 320px up.
- 5Copy the size or a ready-made CSS media query for your breakpoint.
Viewport size versus screen resolution
Phones and tablets have far more physical pixels than web pages work with. An iPhone 15 panel is 1179 × 2556 pixels, but web pages see a viewport of 393 × 852 CSS pixels. The difference is the device pixel ratio (3 in this case): each CSS pixel is drawn with a 3 × 3 block of real pixels, which keeps text sharp.
When you design responsive layouts, the viewport size is the number that matters. It is what CSS media queries and window.innerWidth report.
About these sizes
- Phone and tablet sizes are portrait viewports at the default display zoom.
- Laptop sizes are the default "looks like" resolution, which is usually smaller than the panel's native resolution.
- Real browsers show slightly less than the full viewport height, because address bars and toolbars take up space.
Aspect ratios
The ratio is shown two ways. The friendly ratio scales the short side to 9 (so 390 × 844 becomes 9:19.5), which makes it easy to compare with 16:9 video. The exact ratio is the width and height reduced to lowest terms.
Choosing breakpoints
Most phones today are between 360 and 440 CSS pixels wide, and the smallest still in common use is 320. Rather than targeting individual devices, set breakpoints where your layout starts to look cramped, then check the result against a few sizes from this list.
Frequently asked questions
What is the smallest screen width I should design for?
320 CSS pixels, the width of the original iPhone SE and some small Android phones. If a layout works at 320px, it will fit almost every phone in use.
Why is my phone's resolution bigger than the size listed?
The list shows CSS viewport sizes. Your phone's physical resolution is the viewport multiplied by its pixel ratio, shown in the Physical column.
How do I check my own screen size?
Use our What Is My Screen Size tool. It reads your screen and browser window size live.
Are these sizes exact for every model?
They are the default sizes reported by each device. Display zoom settings, split screen and browser toolbars can change what a page actually gets.
Last updated