Menu

Browser Zoom Changes the Size of a CSS Pixel, and Your Bug Report Cannot See It
📰

Browser Zoom Changes the Size of a CSS Pixel, and Your Bug Report Cannot See It

DEV Community: css·Vladimir Elchinov·2 days ago
#kUpjCF8d
#devtocss#devto#dev#zoom#layout
Reading 0:00
15s threshold

A report arrives with a screenshot. The sidebar has collapsed into the narrow layout, on a desktop, where it should never collapse. You ask for their screen size, because that is what the layout depends on. They say 1920 by 1080, which is true.

You open the page at 1920 by 1080. The sidebar is fine.

Zoom is not magnification

The model most of us carry is that browser zoom works like a magnifying glass held over a finished page: same layout, bigger pixels. It does not. It changes the unit the layout is written in.

MDN, on devicePixelRatio :

When a page is zoomed in (made larger), the size of a CSS pixel increases, and so the devicePixelRatio value increases.

The size of a CSS pixel increases, so everything measured in CSS pixels has fewer of them to work with. A window 1920 device pixels wide at 125% zoom hands your stylesheet a viewport of about 1536 CSS pixels, and your (max-width: 1600px) rule is not misfiring when it collapses the sidebar. It is correct.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.