[joostdecock]

Changing the Zoom in the browser doesn't actually zoom in (as in, the entire page is still in the viewport). Instead it increases the font size, which will have a knock-on effect on everything that is based on font size (like em, rem, or ch units in CSS).

Many images are responsive and will take up whatever (typically horizontal) space is available. So by making the text larger, there's less space left for the images and they become smaller.

I don't think that makes it an anti-pattern. It's more of a quirk of how zooming is implemented in browsers.(or perhaps the feature's name is misleading).

[jmyeet]

You are mistaken. The first version of adjusting for DPI was browsers offering a font-size adjustment and it caused lots of issues for the reasons you're alluding to.

Modern zoom on browsers is simply that: multiply everything by 1.1, 1.25 or whatever. This has been the case for probably a decade.

[cruano]

On Safari/Firefox I'm able to "pinch-zoom" with the trackpad which behaves just as OP was expecting it to, while Command '-' and '+' works as you described

[crtasm]

You can change that on Firefox desktop: View menu -> Zoom -> untick Zoom Text Only.

related, Firefox Android has: Settings -> Accessibility -> [allow] Zoom on all web sites

[pickledcods]

I design sites and this is exactly what is happening. This is also partly to cater for all the different screen sizes, and partly because zooming and DPI are broken beyond repair. W3 broke it first by specifying in CSS 2.1 that DPI is fixed 96dpi, then freedesktop botched HiDPI, and browsers made it even worse by trying to fix it with window.devicePixelRatio and implementing it badly by lying about screen sizes, especially on mobile. And not to mention sites that abuse viewports.

Ctrl +/- does not zoom, it changes the fontsize and devicePixelRatio.

Using a base size (the font size) and scaling everything relative to that using em solves many problems. Sites handle this differently and it is getting progressively worse, confusing screen readers.

https://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_...

https://fronteers.nl/congres/2012/sessions/a-pixel-is-not-a-...

https://developer.mozilla.org/en-US/docs/Web/API/Window/devi...

[ffhhj]

In Firefox mobile, when changing the viewport initial-scale the sizes of some elements don't change. Do you know a way to soft-refresh the page so it recalculates all the sizes? This doesn't happen in Chrome mobile.

[ossopite]

This sounds plausible but I'm not sure it's quite accurate, because in my experience, zooming in also affects the size of things that use px units in CSS.

[no_way]

Yeah, zoom changes page scale factor you can see it's computed value window.devicePixelRatio and that in return changes everything. Font-size can be also be changed independently of zoom inside browser settings.

https://developer.mozilla.org/en-US/docs/Web/API/Window/devi...

[mark-r]

px units are not actual pixels, they're a synthetic approximation. I don't remember the exact formula but I'm sure it's affected by font scaling the same as everything else.

[wizzwizz4]

They're defined in terms of inches. I don't remember the fraction of an inch that a CSS pixel is.

[mark-r]

I believe it's 1/96, while a point is 1/72.

[dangerface]

Makes sense. "Zoom" is a poor label for that function something like "Font size" would make more sense to the user as thats what it appears to be doing.

[bufferoverflow]

People who say it's just the font size are dead wrong. Zooming in changes element sizes, border widths, padding and margin sizes, the scale of effects like shadows, etc, etc, etc. It changes image sizes as well, unless you counter it with CSS.