Search code examples
cssviewportpixelretina-displaydisplay

How can css pixels stretch out when zooming in?

Acoording to this article here https://www.quirksmode.org/mobile/viewports.html the CSS pixels start to grow, and now one CSS pixels overlaps several device pixels. According to me if the CSS pixels grow, then I will be able to see more content of the page not less. But when zooming I am able to do the opposite: to see less content. Can someone clarify this?

Solution

  • The article is question is correct; as you zoom in, the CSS pixels increase in size. However, because the CSS pixels increase in size while the viewport remains the same size, fewer CSS pixels can be displayed (meaning you see fewer CSS pixels).

    Consider this in math:

                  CSS pixels * viewport size = visible pixels

ZOOMED OUT:         1280 * 1024          = 1,310,720
DEFAULT:            1024 * 1024          = 1,048,576
ZOOMED IN:           768 * 1024          =   768,432

    Hopefully this helps clarify this a little :)