Laptop Viewport Sizes for MacBook, Dell XPS, ThinkPad, and More

Laptop Viewport Reference

Laptops represent the primary development and productivity platform, making their viewport sizes critically important for web design. Modern laptops range from budget Chromebooks at 1366x768 to high-resolution MacBook Pros at 1728x1117.

Common Laptop Viewports

Device	CSS Width	CSS Height	DPR
Chromebook (standard)	1366px	768px	1x
MacBook Air 13" (M1/M2)	1440px	900px	2x
ThinkPad X1 Carbon	1920px	1200px	1.25x
Surface Laptop 5	1504px	1004px	1.5x
MacBook Pro 14" (M3)	1512px	982px	2x
Dell XPS 15	1920px	1200px	1.5x
MacBook Pro 16" (M3)	1728px	1117px	2x

The 1440px Sweet Spot

A viewport width of 1440px is often considered the standard desktop design target. MacBook Air models use this exact width, and it is the most common "max-width" for centered content containers. Designing for 1440px and adding breakpoints below ensures a good experience across most laptops.

Scaling and Effective Resolution

Many Windows laptops ship with display scaling set to 125% or 150%, which reduces the effective CSS viewport. A 1920x1200 laptop at 150% scaling has a CSS viewport of approximately 1280x800. This means the user sees fewer CSS pixels than the native resolution suggests. Always test with realistic scaling settings.

Browser Chrome

The actual viewport height is smaller than the display height because the browser's address bar, tab bar, and bookmarks bar consume vertical space. On a 900px display height, the viewport might only be 750-800px tall. Avoid designing layouts that depend on exact viewport height.