Reference library

Screen Sizes

Screen size references for iPhone, iPad, MacBook, and common resolutions that separate native pixels from CSS viewport size, DPR, scaling, screenshots, and layout breakpoints.

Last checked: 2026-05-03

Browse entries Compare sizes

This hub

Use Screen Sizes to compare native display pixels, CSS viewport behavior, DPR, and scaling. Native pixels help screenshots and image sharpness; CSS pixels help responsive web layouts.

Source confidence: Official Last checked: 2026-05-03 Source: Apple: compare iPhone models Found a spec change? Send correction.

How we calculate this

Methodology and source handling

We calculate pixel dimensions from the visible size values, aspect ratios, DPI/PPI formulas, and source notes on this page.

Methodology Editorial policy

Browse

Screen Sizes entries

Screen dimensions are not one number. Designers and developers need to distinguish native hardware resolution, CSS viewport, device pixel ratio, browser UI, zoom, and operating-system scaling before judging a layout.

Search this hub

Common Screen Resolutions: 1080p, 1440p, 4K and More Common screen resolutions include 1920 x 1080, 2560 x 1440, 3840 x 2160, 1366 x 768, and 1440 x 900. Check aspect ratios and layout implications. iPad Screen Size: Pixels, CSS Viewports and DPR iPad screen size varies across mini, standard, Air, and Pro models. Check native pixels, common 4:3 ratios, CSS viewport behavior, and export notes. iPhone Screen Size: Pixels, CSS Viewports and DPR iPhone screen size depends on the model and whether you mean native pixels or CSS viewport. Compare current native resolutions, DPR behavior, and aspect-ratio checks. MacBook Screen Size: Native Pixels, Scaling and DPR MacBook screen size depends on the model and display scaling. Check native Retina pixels, CSS pixels, external display behavior, and aspect-ratio workflow.

Fresh entries in this library

Common Screen Resolutions: 1080p, 1440p, 4K and More iPad Screen Size: Pixels, CSS Viewports and DPR iPhone Screen Size: Pixels, CSS Viewports and DPR MacBook Screen Size: Native Pixels, Scaling and DPR

Core distinction

Native pixels vs CSS viewport

Term	Use it for	Do not use it for
Native pixels	Screenshots, image sharpness, hardware comparison, video frames	Web breakpoints by itself.
CSS viewport	Responsive layout, browser QA, media queries	Hardware pixel density or screenshot sharpness by itself.
DPR	Understanding how physical pixels map to CSS pixels	Replacing real-device or simulator checks.

Models

Device-specific checks

Page	Question it answers
iPhone screen size	Which model resolution am I comparing, and how does CSS viewport differ from device pixels?
iPad dimensions by model	Which iPad class am I designing for, and what happens in portrait vs landscape?
MacBook native vs scaled resolution	Why does a Retina display report a different browser layout width than its native panel pixels?

Related pages and tools

screen iPhone Screen Size screen iPad Screen Size screen MacBook Screen Size screen Common Screen Resolutions tool Aspect Ratio Calculator tool Compare Sizes

FAQ

Common questions

Is iPhone screen size the same as CSS viewport size?

No. iPhone native pixels describe the hardware display, while CSS viewport size depends on Safari or browser UI, zoom, orientation, and DPR.

How should I compare iPad dimensions by model?

Use native pixels for screenshots and asset sharpness, then test CSS viewport behavior separately in portrait and landscape.

Why does MacBook native resolution differ from scaled resolution?

macOS display scaling maps the native Retina panel into a logical workspace, so browser CSS pixels can be much lower than the hardware pixel count.

Source

Official source

Screen pages use official Apple model specifications for native pixels and MDN guidance for device-pixel-ratio behavior.

Apple: compare iPhone models
Used for current iPhone display size and resolution references.
Apple: compare iPad models
Used for current iPad display size and resolution references.
Apple Support: Mac laptop specs
Used for MacBook model and display specification references.
MDN Web Docs: Window.devicePixelRatio
Used for CSS pixels, device pixels, display scaling, and high-DPI screen behavior.

Last checked: 2026-05-03