Windows display scaling and the 1536×864 viewport

1536×864 is what a 1920×1080 laptop screen looks like to websites when Windows runs at 125% display scaling, the default on many 15.6″ and 17″ laptops. Windows divides the panel by the scale factor (1920 ÷ 1.25 = 1536, 1080 ÷ 1.25 = 864) and the browser reports a devicePixelRatio of 1.25. After the taskbar and Chrome's toolbars, your page gets about 1536×729.

How Windows scaling turns pixels into CSS pixels

Windows scaling makes text and buttons bigger by drawing everything at 125%, 150% or more. Browsers follow along: they treat each CSS pixel as 1.25 or 1.5 device pixels, which shrinks the CSS size of the screen.

The formula is simple:

• CSS width = panel width ÷ scale
• CSS height = panel height ÷ scale
• devicePixelRatio = scale (1.25 at 125%)

For the most common panel, 1920×1080:

Same panel, same physical pixels, three very different viewports. If DPR is new to you, device pixel ratio explained covers it.

Windows picks a "recommended" scale for each panel based on its size and pixel density, and laptop makers often override it (Microsoft's notes on DPI defaults). That's why two laptops with identical panels can show your site at different sizes.

Common laptop panels and what websites see

Here's every Windows laptop panel in the doesitfit database, with its default scaling and the other settings its owner can pick:

Panels range from 1366 to 3200 pixels wide, but at their defaults the CSS widths all land between 1280 and 1707. High-resolution laptops don't give you more room; they give you sharper pixels. Chromebooks follow the same pattern: a Full HD Chromebook defaults to 1.25× and reports 1536×864 too. The full list is on the Windows laptops hub.

Chrome rounds fractional sizes up

Not every panel divides neatly. 2560 ÷ 1.5 = 1706.67 and 1600 ÷ 1.5 = 1066.67, and Chrome rounds both up, so that 16″ laptop reports 1707×1067. The same happens elsewhere in the table:

• Surface Laptop 13″: 1280 ÷ 1.5 = 853.33, reported as 854
• Surface Laptop 15″: 1664 ÷ 1.5 = 1109.33, reported as 1110
• Framework Laptop 13: 1504 ÷ 1.5 = 1002.67, reported as 1003
• 2560×1600 at 175%: 1462.86 × 914.29, reported as 1463×915

Two practical consequences. Never write a media query that depends on an exact pixel match with one of these sizes. And at fractional DPRs like 1.25 and 1.5, one CSS pixel isn't a whole number of device pixels, so thin borders and 1px lines can render slightly uneven. That's normal, not a bug in your CSS.

Images on scaled screens

A DPR of 1.25 or 1.5 also changes how sharp your images need to be. An image shown 800 CSS px wide on a 1536×864 laptop covers 1000 real pixels (800 × 1.25); on a 1280×720 laptop at 150%, an 800px-wide slot covers 1200. Serve an 800px file and the browser stretches it, which looks soft next to crisp text.

You don't need to guess the DPR. Give the browser a few sizes and let it pick:

<img
  src="hero-1200.jpg"
  srcset="hero-800.jpg 800w, hero-1200.jpg 1200w, hero-1600.jpg 1600w"
  sizes="(min-width: 1024px) 800px, 100vw"
  width="1600" height="900"
  alt="Product dashboard on a laptop">

The browser multiplies the sizes width by the DPR and picks a file big enough to cover it. The full walkthrough is in responsive images with srcset and sizes.

How much height is actually left

The CSS screen size includes the taskbar, and the browser takes its own share. On Windows 11, the taskbar is 48px and Chrome's tab strip and toolbar take 87px, so a maximized Chrome window loses 135px of height:

Adjust from there:

• Bookmarks bar showing: 34px less. A 1536×864 laptop drops to 1536×695.
• Windows 10: the taskbar is 40px, so pages get 8px more than on Windows 11.
• Not maximized: anything goes. A window snapped to half of a 1536px screen is about 768px wide, which is tablet-layout territory.

Width has a Windows quirk too. Windows shows a classic scrollbar that takes space from the page, but media queries measure the viewport including the scrollbar. The same goes for 100vw, which is why width: 100vw sections cause sideways scrolling on Windows. Use width: 100% instead (more on horizontal scroll).

Why designing only for 1920 misses most laptops

In StatCounter's worldwide data for August 2026, 1920×1080 is the most common desktop screen at 22.2%. But the sizes narrower than 1920 in the same top list add up to 21.0%:

Nearly as many visits come from these smaller screens as from 1920×1080 itself (all the numbers). And the gap in usable space is bigger than the width suggests. A design made at 1920×1080 has 945px of height in Chrome; on a 13–14″ laptop at 150% it gets 585px, 38% less.

The usual ways a 1920 design breaks on a 1536 or 1280 laptop:

• Fixed widths. A width: 1400px container spills sideways at 1280.
• Full-height heroes. A height: 100vh hero with a headline, paragraph and button designed for 945px pushes the button below the fold at 585px.
• Too many columns. Four cards with a min-width of 340px need 1360px plus gaps.
• Breakpoints in the wrong place. If your "desktop" styles only start at Tailwind's 2xl (1536px), a 1536×864 laptop gets them but a 1280×720 one doesn't. Where each laptop lands is mapped in Tailwind breakpoints on real devices.

How to test

1. Check your own screen. Open /whats-my-viewport to see your viewport, DPR and matching devices.
2. Change the scale. On a Windows laptop, go to Settings → System → Display → Scale and flip between 100%, 125% and 150%. It's the most realistic test there is, because it's exactly what your visitors have.
3. Use browser zoom. On a 1920×1080 monitor at 100%, zooming Chrome to 125% gives the page about 1536px of width, and 150% gives about 1280px.
4. Use DevTools with the visible size. Enter 1536×729 or 1280×585 in responsive mode, not the screen size. DevTools has other gaps, covered in why DevTools device mode isn't accurate.
5. Check them side by side. In doesitfit, the Laptops preset shows the 1366×768 and 1536×864 Windows laptops next to three MacBooks. The 1536×864 laptop has a Display scaling menu that flips it to 100% or 150%, and Browser bars adds the taskbar and Chrome's 87px.

If an AI tool built your site, this prompt covers the common problems:

My site was designed at 1920×1080. Make it work on Windows laptops at 1536×864 and 1280×720 CSS pixels, where Chrome leaves only about 729px and 585px of height. Check that: nothing has a fixed width wider than 1280px; there's no sideways scrolling (don't use 100vw for full-width sections); the hero's headline and main button are visible within 585px of height; and grids drop a column instead of overflowing. Keep the design the same at 1920×1080 and list every change.

For the Mac side of the same story, see MacBook resolution vs CSS pixels.

What to take away

• 1536×864 is a 1920×1080 panel at 125% scaling, with a DPR of 1.25. 1280×720 is the same panel at 150%.
• Laptop panels from 1366 to 3200 pixels wide all end up between 1280 and 1707 CSS px at their defaults.
• Chrome rounds fractional sizes up: 2560×1600 at 150% is 1707×1067.
• A maximized Chrome window on Windows 11 loses 135px of height: 1536×864 becomes 1536×729.
• Screens narrower than 1920 add up to nearly as much desktop traffic as 1920×1080. Design for 1280 and up, not for 1920.