Popular device viewport sizes
Browse the FlexViewport presets: browser viewport width and height in CSS pixels. Choose a size for testing advice and a comparison of both orientations.
iPhone SE →
- Default viewport
- 375 × 667 CSS px
- Portrait
- 375 × 667 CSS px
- Landscape
- 667 × 375 CSS px
- Category
- iPhone
- Preset DPR (reference only)
- 2
iPhone 14 →
- Default viewport
- 390 × 844 CSS px
- Portrait
- 390 × 844 CSS px
- Landscape
- 844 × 390 CSS px
- Category
- iPhone
- Preset DPR (reference only)
- 3
iPhone 15 Pro →
- Default viewport
- 393 × 852 CSS px
- Portrait
- 393 × 852 CSS px
- Landscape
- 852 × 393 CSS px
- Category
- iPhone
- Preset DPR (reference only)
- 3
iPhone 15 Pro Max →
- Default viewport
- 430 × 932 CSS px
- Portrait
- 430 × 932 CSS px
- Landscape
- 932 × 430 CSS px
- Category
- iPhone
- Preset DPR (reference only)
- 3
Pixel →
- Default viewport
- 412 × 915 CSS px
- Portrait
- 412 × 915 CSS px
- Landscape
- 915 × 412 CSS px
- Category
- Android
- Preset DPR (reference only)
- 2.625
Galaxy →
- Default viewport
- 360 × 780 CSS px
- Portrait
- 360 × 780 CSS px
- Landscape
- 780 × 360 CSS px
- Category
- Android
- Preset DPR (reference only)
- 3
iPad Mini →
- Default viewport
- 768 × 1024 CSS px
- Portrait
- 768 × 1024 CSS px
- Landscape
- 1024 × 768 CSS px
- Category
- Tablet
- Preset DPR (reference only)
- 2
iPad Pro →
- Default viewport
- 1024 × 1366 CSS px
- Portrait
- 1024 × 1366 CSS px
- Landscape
- 1366 × 1024 CSS px
- Category
- Tablet
- Preset DPR (reference only)
- 2
Laptop →
- Default viewport
- 1366 × 768 CSS px
- Portrait
- 768 × 1366 CSS px
- Landscape
- 1366 × 768 CSS px
- Category
- Laptop / desktop
- Preset DPR (reference only)
- 1
Desktop →
- Default viewport
- 1920 × 1080 CSS px
- Portrait
- 1080 × 1920 CSS px
- Landscape
- 1920 × 1080 CSS px
- Category
- Laptop / desktop
- Preset DPR (reference only)
- 1
What is a CSS viewport?
The layout viewport is the area used by the browser to calculate layout and width-based media queries. In the tester, an iframe sets that area. CSS pixels are different from physical display pixels; DPR is only descriptive preset metadata.
Why is testing one iPhone not enough?
One size can hide overflow on narrower screens or awkward stretching on wider ones. Compare a phone, tablet and desktop, then check intermediate widths. A preset name does not promise an exact browser reproduction: browser controls, zoom and settings can change the available area.
When should I use a custom viewport?
Use custom sizes near the point where navigation stops fitting or cards become cramped. This tests a layout boundary even when no preset has that width. Laptop and desktop presets start in landscape; their portrait dimensions show the sides swapped.
More about CSS: MDN — Viewport concepts