38

In what way is the design scaled up or down? I'm trying to figure out what exactly happens at the CSS level, and what the consequences are for different sizing methods (px, em, rem, etc).

By the way, I am mainly concerned with zooming behaviour for modern desktop browsers. (I suspect mobile browser to be a straight enlargement of the whole page after rendering it normally, and know that old fashioned browsers just increment the base font-size). What isn't clear however, is what modern browsers (say the latest versions of Chrome or FF) do exactly when the user presses Ctrl + or Ctrl -.

Do they also just render the page normally (i.e. at 100%) and then just enlarge the rendered image? Because FF still seems to respect % widths for example, so it doesn't seem to be a straight up enlargement.

vkjb38sjhbv98h4jgvx98hah3fef
  • 1,553
  • 2
  • 13
  • 32

2 Answers2

39

Zooming as implemented in modern browsers consists of nothing more than “stretching up” pixels. That is, the width of the element is not changed from 128 to 256 pixels; instead the actual pixels are doubled in size. Formally, the element still has a width of 128 CSS pixels, even though it happens to take the space of 256 device pixels.

In other words, zooming to 200% makes one CSS pixel grow to four times the size of one device pixels. (Two times the width, two times the height, yields four times in total).

Source: Concept of device pixels and CSS pixels

André Chalella
  • 13,788
  • 10
  • 54
  • 62
iniravpatel
  • 1,553
  • 16
  • 24
0

If you are referring to what happens within the browser when you zoom, it depends on what browser you are using, and on what device. I believe the type of measurement unit you use in your CSS can also be a factor (%, em, and px). But typically, say the CSS applied to fonts, that gets rendered again when you zoom. Same with background property values. But in many browsers this re-rendering happens so fast you shouldn't even notice it, unless there is some performance issue that is slowing the browser down (which could be code or system related).

Opaw Nako
  • 1,096
  • 1
  • 8
  • 17
  • So, but more specifically, what happens exactly? Are all `px` sizes incremented by `10px` for example? Or is it just a straight graphical zoom? – vkjb38sjhbv98h4jgvx98hah3fef Apr 01 '15 at 12:28
  • I cannot be 100% certain, but I don't think this change is incremental by a certain pixel dimension since not all CSS declarations use pixel measurement units. I think it's safe to say that the change is likely percentage based and the exact measure of change would be determined by the percentage of zoom. Although the CSS declaration within the DOM never actually changes. All this is done by the browser. So technically, the CSS doesn't change by default unless you are using media queries or some other means to target specific viewports or devices and adjust measurements in that way. – Opaw Nako Apr 01 '15 at 16:33