Viewport reference database

Device Viewport Database

Search practical CSS viewport sizes, screen resolutions, DPR, diagonal size, and PPI references for phones, tablets, and laptops. Export the starter dataset for QA notes, design systems, and responsive testing checklists.

Download CSV Download JSON

Database stats

device records

reference pages

CSV

export ready

JSON

export ready

11 records

iPhone Viewport Sizes

CSS viewport width, height, DPR, physical resolution, and PPI references for common iPhone models.

Open reference → 14 records

Android Viewport Sizes

Viewport and display references for popular Android phones from Pixel and Samsung Galaxy lines.

Open reference → 8 records

iPad Viewport Sizes

Tablet viewport, DPR, physical resolution, and PPI references for iPad testing.

Open reference → 6 records

MacBook Screen Sizes

Logical display points, physical resolution, DPR, diagonal size, and PPI references for MacBook screens.

Open reference → 5 records

Monitor Screen Sizes

Desktop monitor viewport and resolution references for 1080p, QHD, 4K, ultrawide, and common work setups.

Open reference → 3 records

TV Screen Sizes

Common 4K TV sizes with resolution, diagonal size, aspect ratio, and display comparison references.

Open reference →

Visual comparison

Compare viewport shapes

Pick two records and compare CSS viewport or physical resolution shapes. The drawing is scaled for relative size, so it is useful for layout intuition before opening the detailed records.

Left device

Type to filter the device database. Results are grouped by family.

Right device

Type to filter the device database. Results are grouped by family.

Compare mode

CSS viewport comparison

Compare two devices to see the relative area.

—

Device

Family · DPR · PPI

—

Device

Family · DPR · PPI

Searchable table

Viewport size by device

Filter by device family, type, model name, CSS viewport width, DPR, PPI, and year. Use the exports when you need the same data outside the website.

Filter device database

Search the full viewport reference set, then narrow results by device family, brand, type, DPR, and CSS viewport width.

Search devices Sort results

Advanced filters

Family Brand Type DPR range CSS viewport width

47 devices shown from 47 records.

Swipe horizontally to view all viewport, resolution, DPR, PPI, source, and notes columns.

Device	Family	Type	CSS viewport	Resolution	DPR	PPI	Source	Notes
iPhone 12 / 12 Pro Apple · 2020	iPhone	Phone	390 × 844	1170 × 2532	3	460	Manufacturer specs + iOS viewport reference High	Common older iPhone width still useful for QA coverage.
iPhone 13 mini Apple · 2021	iPhone	Phone	375 × 812	1080 × 2340	3	476	Manufacturer specs + iOS viewport reference High	Small high-DPI iPhone reference for compact mobile layouts.
iPhone 14 Pro Apple · 2022	iPhone	Phone	393 × 852	1179 × 2556	3	460	Manufacturer specs + viewport reference Review	Similar CSS viewport to newer 6.1-inch Pro models.
iPhone 15 / 15 Pro Apple · 2023	iPhone	Phone	393 × 852	1179 × 2556	3	460	Manufacturer specs + viewport reference Review	Good baseline for modern iPhone layouts.
iPhone 15 Plus Apple · 2023	iPhone	Phone	430 × 932	1290 × 2796	3	460	Manufacturer specs + iOS viewport reference High	Large mainstream iPhone viewport similar to Pro Max browser layout testing.
iPhone 15 Pro Max Apple · 2023	iPhone	Phone	430 × 932	1290 × 2796	3	460	Manufacturer specs + viewport reference Review	Common large iPhone viewport reference.
iPhone 16 Apple · 2024	iPhone	Phone	393 × 852	1179 × 2556	3	460	Manufacturer specs + iOS viewport reference High	Mainstream modern iPhone width for common mobile breakpoints.
iPhone 16 Plus Apple · 2024	iPhone	Phone	430 × 932	1290 × 2796	3	460	Manufacturer specs + iOS viewport reference High	Large non-Pro iPhone viewport reference for portrait mobile QA.
iPhone 16 Pro Apple · 2024	iPhone	Phone	402 × 874	1206 × 2622	3	460	Manufacturer specs + viewport reference Review	Useful for modern iOS Pro breakpoint checks.
iPhone 16 Pro Max Apple · 2024	iPhone	Phone	440 × 956	1320 × 2868	3	460	Manufacturer specs + viewport reference Review	Typical portrait CSS viewport; browser chrome and zoom can change visible height.
iPhone SE 3rd gen Apple · 2022	iPhone	Phone	375 × 667	750 × 1334	2	326	Manufacturer specs + viewport reference Review	Small iPhone viewport useful for compact layout checks.
Google Pixel 8 Google · 2023	Android	Phone	412 × 915	1080 × 2400	2.625	428	Manufacturer specs + viewport reference Review	Representative Android mid-size viewport.
Google Pixel 8 Pro Google · 2023	Android	Phone	448 × 998	1344 × 2992	3	489	Manufacturer specs + viewport reference Review	Android browser UI and display size settings can change effective CSS viewport.
Google Pixel 8a Google · 2024	Android	Phone	412 × 915	1080 × 2400	2.625	430	Manufacturer specs + Android viewport reference Review	Budget Pixel reference useful for common Android viewport testing.
Google Pixel 9 Google · 2024	Android	Phone	393 × 874	1080 × 2424	2.75	422	Manufacturer specs + Android viewport reference Review	Current mainstream Pixel-style viewport for Android breakpoint checks.
Google Pixel 9 Pro XL Google · 2024	Android	Phone	448 × 997	1344 × 2992	3	486	Manufacturer specs + Android viewport reference Review	Large Pixel viewport reference; Android display size settings can change CSS values.
OnePlus 12 OnePlus · 2024	Android	Phone	450 × 1000	1440 × 3168	3.2	510	Manufacturer specs + Android viewport reference Review	High-resolution Android flagship reference; CSS values can vary by display settings.
Samsung Galaxy A55 Samsung · 2024	Android	Phone	360 × 780	1080 × 2340	3	390	Manufacturer specs + Android viewport reference Review	Mainstream Samsung Android reference with narrow CSS width.
Samsung Galaxy S23 Ultra Samsung · 2023	Android	Phone	480 × 1067	1440 × 3088	3	500	Manufacturer specs + Samsung viewport reference Review	Large Samsung reference; display mode and font/display size can affect viewport.
Samsung Galaxy S24 Samsung · 2024	Android	Phone	360 × 780	1080 × 2340	3	416	Manufacturer specs + viewport reference Review	Narrow CSS width is useful for mobile breakpoint testing.
Samsung Galaxy S24 Ultra Samsung · 2024	Android	Phone	480 × 1067	1440 × 3120	3	505	Manufacturer specs + viewport reference Review	Large Android viewport reference; Samsung display modes may vary.
Samsung Galaxy Z Fold 5 cover Samsung · 2023	Android	Foldable phone	344 × 882	904 × 2316	2.625	401	Manufacturer specs + viewport reference Review	Cover screen can reveal narrow layout issues.
Samsung Galaxy Z Fold 5 inner Samsung · 2023	Android	Foldable phone	690 × 829	1812 × 2176	2.625	373	Manufacturer specs + viewport reference Review	Inner display is important for tablet-like responsive states.
Samsung Galaxy Z Fold 6 cover Samsung · 2024	Android	Foldable phone	376 × 904	968 × 2376	2.625	410	Manufacturer specs + foldable viewport reference Review	Narrow foldable cover screen reference for responsive edge cases.
Samsung Galaxy Z Fold 6 inner Samsung · 2024	Android	Foldable phone	712 × 776	1856 × 2160	2.625	374	Manufacturer specs + foldable viewport reference Review	Foldable inner display reference for tablet-like responsive states.
iPad 10th gen Apple · 2022	iPad	Tablet	820 × 1180	1640 × 2360	2	264	Manufacturer specs + viewport reference Review	Common modern iPad portrait viewport.
iPad 9th gen Apple · 2021	iPad	Tablet	810 × 1080	1620 × 2160	2	264	Manufacturer specs + iPad viewport reference High	Older iPad reference still useful for school and office environments.
iPad Air 11-inch Apple · 2024	iPad	Tablet	820 × 1180	1640 × 2360	2	264	Manufacturer specs + iPad viewport reference High	Modern iPad Air reference close to iPad 10th-gen layout width.
iPad Air 13-inch Apple · 2024	iPad	Tablet	1024 × 1366	2048 × 2732	2	264	Manufacturer specs + iPad viewport reference High	Large iPad Air reference for desktop-like tablet layouts.
iPad Pro 11-inch Apple · 2024	iPad	Tablet	834 × 1210	1668 × 2420	2	264	Manufacturer specs + viewport reference Review	Useful for tablet card grids and two-column layouts.
iPad Pro 12.9-inch Apple · 2022	iPad	Tablet	1024 × 1366	2048 × 2732	2	264	Manufacturer specs + viewport reference Review	Large tablet viewport often triggers desktop-like layouts.
iPad Pro 13-inch Apple · 2024	iPad	Tablet	1032 × 1376	2064 × 2752	2	264	Manufacturer specs + iPad viewport reference Review	Large current iPad Pro reference; test split-screen states separately.
iPad mini 6 Apple · 2021	iPad	Tablet	744 × 1133	1488 × 2266	2	326	Manufacturer specs + viewport reference Review	Small tablet viewport can sit between phone and tablet breakpoints.
MacBook Air 13-inch Apple · 2024	MacBook	Laptop	1280 × 832	2560 × 1664	2	224	Manufacturer specs + viewport reference Review	Logical display points can change with macOS scaled display settings.
MacBook Air 15-inch Apple · 2024	MacBook	Laptop	1440 × 932	2880 × 1864	2	224	Manufacturer specs + viewport reference Review	Large laptop baseline for desktop responsive layouts.
MacBook Air M1 13-inch Apple · 2020	MacBook	Laptop	1280 × 800	2560 × 1600	2	227	Manufacturer specs + macOS scaled reference High	Popular older MacBook baseline for desktop QA and screenshots.
MacBook Pro 13-inch Apple · 2022	MacBook	Laptop	1280 × 800	2560 × 1600	2	227	Manufacturer specs + macOS scaled reference High	Compact Pro laptop reference for common desktop breakpoints.
MacBook Pro 14-inch Apple · 2024	MacBook	Laptop	1512 × 982	3024 × 1964	2	254	Manufacturer specs + viewport reference Review	High-density laptop reference for desktop screenshots and QA.
MacBook Pro 16-inch Apple · 2024	MacBook	Laptop	1728 × 1117	3456 × 2234	2	254	Manufacturer specs + viewport reference Review	Wide laptop baseline for large desktop layouts.
24-inch 1080p monitor Generic · Reference	Monitor	Monitor	1920 × 1080	1920 × 1080	1	92	Reference monitor resolution Reference	Common office and gaming monitor baseline; browser viewport is smaller when windowed.
27-inch 4K monitor Generic · Reference	Monitor	Monitor	3840 × 2160	3840 × 2160	1	163	Reference monitor resolution Reference	High-density desktop display reference; OS scaling often changes CSS viewport size.
27-inch QHD monitor Generic · Reference	Monitor	Monitor	2560 × 1440	2560 × 1440	1	109	Reference monitor resolution Reference	Common design and productivity monitor reference.
32-inch 4K monitor Generic · Reference	Monitor	Monitor	3840 × 2160	3840 × 2160	1	138	Reference monitor resolution Reference	Large 4K desktop display reference for wide layouts and visual comparison.
49-inch ultrawide monitor Generic · Reference	Monitor	Ultrawide monitor	5120 × 1440	5120 × 1440	1	109	Reference ultrawide resolution Reference	Super-ultrawide reference useful for dashboard and app-layout testing.
55-inch 4K TV Generic · Reference	TV	TV	3840 × 2160	3840 × 2160	1	80	Reference TV resolution Reference	Common living-room 4K TV baseline for media and presentation comparisons.
65-inch 4K TV Generic · Reference	TV	TV	3840 × 2160	3840 × 2160	1	68	Reference TV resolution Reference	Popular large TV comparison reference.
75-inch 4K TV Generic · Reference	TV	TV	3840 × 2160	3840 × 2160	1	59	Reference TV resolution Reference	Large TV reference for visual comparison and viewing-distance planning.
No device records match these filters. Reset filters or try a broader search.

Values are practical references and can vary by browser, zoom, OS scaling, display mode, and orientation.

Source and update note

Methodology before scale

This viewport reference database combines manufacturer display specifications, practical CSS viewport references, browser testing notes, and normalized QA-friendly values. Physical resolution, diagonal, and PPI are hardware-level references; CSS viewport values can change with browser UI, zoom, OS display scaling, orientation, split view, and responsive mode. Use these records as practical testing baselines and verify critical layouts on real browsers.

Physical display values should be checked against manufacturer specification pages before publishing high-stakes programmatic pages.

CSS viewport values are practical portrait references gathered from common browser/device behavior and may differ by browser chrome, address bars, zoom, and display scaling.

Foldables, tablets, desktop/laptop scaled modes, monitors, and TVs can report multiple usable viewport states; test the actual browser state before QA sign-off.

Records are marked with confidence levels so future editors can prioritize review and replacement with verified device-lab measurements.

Source notes used for records

Manufacturer specifications

Use official Apple, Google, Samsung, monitor, and TV specification pages for physical resolution, diagonal size, and PPI/marketing display references.

Browser viewport testing

Use live browser measurements from Safari, Chrome, Firefox, Edge, device simulators, and real devices to validate CSS viewport width and height.

CSS/device behavior documentation

Use browser documentation for viewport, visualViewport, DPR, and responsive behavior when explaining why live values differ from physical specs.

Quarterly editorial review

Review newly released devices, OS display scaling changes, and browser UI changes before expanding indexed device pages.