6 ms·

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

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).

crtasm 5y ago
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
ossopite 5y ago
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.
- mark-r 5y ago
  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 5y ago
    They're defined in terms of inches. I don't remember the fraction of an inch that a CSS pixel is.
    - mark-r 5y ago
      I believe it's 1/96, while a point is 1/72.
    - deleted 5y ago
      [deleted]
- no_way 5y ago
  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/devicePixelRatio https://developer.mozilla.org/en-US/docs/Web/API/Window/devi...
cruano 5y ago
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
- deleted 5y ago
  [deleted]
dangerface 5y ago
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 5y ago
  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.
jmyeet 5y ago
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.
pickledcods 5y ago
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_not.html https://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_... https://fronteers.nl/congres/2012/sessions/a-pixel-is-not-a-pixel-peter-paul-koch https://fronteers.nl/congres/2012/sessions/a-pixel-is-not-a-... https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio https://developer.mozilla.org/en-US/docs/Web/API/Window/devi...
- ffhhj 5y ago
  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.

crtasm 5y ago

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

ossopite 5y ago

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.

mark-r 5y ago
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 5y ago
  They're defined in terms of inches. I don't remember the fraction of an inch that a CSS pixel is.
  - mark-r 5y ago
    I believe it's 1/96, while a point is 1/72.
  - deleted 5y ago
    [deleted]
no_way 5y ago
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/devicePixelRatio https://developer.mozilla.org/en-US/docs/Web/API/Window/devi...

cruano 5y ago

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

deleted 5y ago
[deleted]

dangerface 5y ago

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 5y ago
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.

jmyeet 5y ago

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.

pickledcods 5y ago

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_not.html https://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_... https://fronteers.nl/congres/2012/sessions/a-pixel-is-not-a-pixel-peter-paul-koch https://fronteers.nl/congres/2012/sessions/a-pixel-is-not-a-... https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio https://developer.mozilla.org/en-US/docs/Web/API/Window/devi...

ffhhj 5y ago
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.