Reply To: Emulating browser zoom with CSS (for accessibility)

[jrrdnx]

Not really. Let’s say my viewport width is 800px and I zoom in to a website using the built-in browser zoom to 200%. This is equivalent to

html {
    width: 50%;
    transform: scale(2)
    transform-origin: 0 0;
}

with one exception: the viewport width is still 800px.

The built-in browser zoom also seems to change the viewport width so that different media queries are triggered, such as @media (max-width: 400px).

In my example, that media query won’t be in effect because the viewport width is still 800px. I’d like to emulate the zoom in a way that would trigger the different viewports used in my @media queries.

Alternative Option

I started down this path because I wanted to be able to resize everything on the page. Think of accessibility links that allow the user to change the font size on the web page. If I’m using REMs for all of my font-size units and then change the html font-size property to double it, fonts throughout the page will be twice as large. But this only applies to font-size and nothing else.

I was looking for a way to basically change that :root element that all REMs are based on, not only for font-size but for everything that was using REMs (widths, heights, padding, margin, etc).