Screen size guide

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.

Last checked: 2026-05-03

Check aspect ratio Compare sizes

At a glance

Use 1920 x 1080 for standard 1080p HD, 2560 x 1440 for QHD, and 3840 x 2160 for 4K UHD. Always separate native resolution from CSS viewport and OS scaling.

Source confidence: Editorial Last checked: 2026-05-03 Source: Apple: compare iPhone models Specs may change; verify before final production. 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

Quick answer

Copy-ready answer

Use 1920 x 1080 for standard 1080p HD, 2560 x 1440 for QHD, and 3840 x 2160 for 4K UHD. Always separate native resolution from CSS viewport and OS scaling.

Common Screen Resolutions: 1080p, 1440p, 4K and More

Dimensions and specs

Example native pixels	1,920 x 1,080 px
Aspect ratio	16:9
Design check	Native pixels, CSS pixels, DPR
Recommended PPI	Use device DPR for web; use native pixels for screenshots

Formula

How to calculate this size

Target canvas1,920 x 1,080 px

Export at the recommended pixel canvas before upload or handoff.

Aspect ratio16:9

Reduce width and height by their greatest common divisor.

Resize rulematch the target ratio before export

Use fit for no crop, fill or center crop for exact coverage, or pad when borders are acceptable.

Export checklist

Before you upload

Native pixels

Use native resolution for screenshots, video frames, and image sharpness checks.

CSS viewport

Use CSS pixels for responsive layout breakpoints and browser QA.

DPR and scaling

Check device pixel ratio, zoom, browser chrome, and OS display scaling before judging layout.

Common mistakes

Avoid these screen-size mistakes

Using native pixels as CSS viewport

A display can have thousands of hardware pixels while the browser exposes a much smaller CSS viewport.

Ignoring DPR or display scaling

Retina, HiDPI, browser zoom, and OS scaling change how many physical pixels map to one CSS pixel.

Checking only one orientation

Phone and tablet screenshots, app previews, and responsive layouts can change sharply between portrait and landscape.

Calculator

Check aspect ratio and screen pixels

Use the prefilled target, swap orientation if needed, and copy the reduced ratio before preparing screenshots or previews.

Workflow

How to read screen size

Term	Use it for
Native pixels	Asset sharpness, screenshots, video frames, and hardware comparison.
CSS pixels	Responsive layout breakpoints and browser previews.
Device pixel ratio	How many physical pixels the browser uses for one CSS pixel.
Safe preview	Check real devices or simulators because browser chrome, zoom, and OS scaling change the usable area.

Specs

Common resolutions screen examples

Device or class	Native pixels	Notes
Full HD / 1080p	1920 x 1080 px	16:9; common laptop, monitor, video, and presentation baseline.
QHD / 1440p	2560 x 1440 px	16:9; common high-density desktop monitor target.
4K UHD	3840 x 2160 px	16:9; common high-resolution monitor and video target.
1366 x 768	1366 x 768 px	16:9-ish; still useful as a conservative laptop QA viewport class.
1440 x 900	1440 x 900 px	16:10; common productivity laptop ratio.

Checklist

Preview and export notes

Check	Action
Portrait and landscape	Swap width and height before judging aspect ratio or screenshot crops.
Retina or HiDPI	Export images at enough source pixels for the display density.
Browser UI	Do not treat full native pixels as the CSS viewport available to a web page.

Related pages and tools

hub Screen sizes tool Aspect ratio calculator tool Compare sizes tool DPI calculator trust Methodology Formulas, rounding rules, bleed assumptions, platform confidence labels, and source handling. trust Editorial Policy How PixelMeasures reviews sources, labels confidence, and handles correction reports.

Same branch

Nearby pages

iPad Screen Size: Pixels, CSS Viewports and DPR iPhone Screen Size: Pixels, CSS Viewports and DPR MacBook Screen Size: Native Pixels, Scaling and DPR

FAQ

Common questions

Is common resolutions screen size the same as CSS viewport size?

No. Native pixels describe the display hardware. CSS viewport size depends on browser, zoom, orientation, operating-system scaling, and device pixel ratio.

Which value should designers use?

Use CSS viewport values for layout breakpoints and native pixels for screenshots, exports, and image sharpness checks.

What aspect ratio is the example common resolutions size?

The example native pixel size on this page reduces to 16:9.

References

Sources and references

Screen-size guidance uses official manufacturer specifications for native pixels and MDN for browser device-pixel-ratio behavior.

Apple: compare iPhone models
Official Apple comparison page for current and recent iPhone display sizes and pixel resolutions.
Apple: compare iPad models
Official Apple comparison page for iPad display sizes and pixel resolutions.
Apple: MacBook Pro tech specs
Official Apple specifications for MacBook Pro native display resolution and pixel density.
MDN: Window.devicePixelRatio
Browser reference for the relationship between physical pixels, CSS pixels, and device pixel ratio.

Last checked: 2026-05-03