Forums

Give help. Get help.

  • # November 17, 2016 at 9:18 am

    I had posted a question on StackOverflow recently, but it hasn’t had any response so far: http://stackoverflow.com/questions/40062404/emulating-browser-zoom-with-css-and-maybe-javascript

    What I’m trying to do is emulate browser zoom with CSS only, so that users can have the functionality of zooming in and out without having to do so with their browser. The main goal I’m trying to accomplish is to trigger different media queries.

    Everything (media queries, font sizes, etc) are using REMs, so changing the font-size on the html element will change font across the board, but that’s as far as it goes. I can also easily scale the entire site, like so:

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

    but since the viewport doesn’t change, everything overflows. I can inspect the page in Chrome (Mac OS) when using the browser’s built-in zoom and see that it’s actually changing the width of the viewport as well which is what triggers different media queries.

    Has anyone tried anything like this before?

    # November 17, 2016 at 12:17 pm

    Im not sure that I understand what you’re asking for. Are you looking for a CSS-only mechanism to trigger a change in style? Something like this maybe? https://www.sitepoint.com/building-style-switcher-with-pure-css-using-checked/
    I’ve also seen it done with the :target selector although I can’t find that particular demo at the mo.

    # November 17, 2016 at 12:35 pm

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

    # November 17, 2016 at 1:46 pm

    Why not use relative units for all your sizing? https://css-tricks.com/building-resizeable-components-relative-css-units/ Then the whole layout will resize when you change the base font-size.

    # November 17, 2016 at 4:34 pm

    I am:

    Everything (media queries, font sizes, etc) are using REMs

    But media queries are looking at the viewport which doesn’t change unless the user resizes their browser window.

    What I’m looking for is a way to trigger media queries based on my “zoom” level. If the viewport is 50rem wide and I want to increase font-sizes by a factor of 2 (basically zoom to 200%), I don’t want just the font-sizes to increase. I want to emulate having the viewport at a width of 25rem so it uses the appropriate media queries as though I’ve resized the viewport, which is what the zoom functionality built in to browsers does.

    # March 1, 2018 at 2:11 pm

    Hey jrrdnx,

    Did you ever manage to solve this issue?

    I was trying to do something very similar but I hit a brick wall when I realized that REM units in media queries are not using the font-size of the html element as a basis.

    # March 10, 2018 at 6:17 am

    Zoom,

    No solution yet, as I’d pretty much hit a brick wall. My original StackOverflow question also appears to have been removed as “abandoned”, and it’s sort of tough to explain without a series of screenshots.

    We also haven’t had any recent needs for it, so I was planning on circling back around to it when necessary.

    # March 10, 2018 at 6:37 am

    Zoom,

    Just to see if we’re on the same page, I set up a quick example for what I’m trying to do.

    Given the following HTML/CSS:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>TEST</title>
        <style>
            body {
                display: flex;
                height: 100vh;
                margin: 0;
            }
            div {
                flex: 1 1 50%;
                max-width: 50%;
            }
            @media (min-width: 45em) {
                div {
                    flex: 1 1 25%;
                    max-width: 25%;
                }
            }
            .one {
                background-color: red;
            }
            .two {
                background-color: blue;
            }
        </style>
    </head>
    <body>
        
    </body> </html>

    By default, when the viewport is at 800px the red and blue divs will show at 25% like so:

    Default 100% zoom at 800px wide viewport

    When I change the built-in browser zoom to 200%, the html element becomes 400px wide and the @media (min-width: 45em) query no longer applies, EVEN THOUGH THE VIEWPORT IS STILL AT 800PX!:

    200% zoom at 800px wide viewport

    Providing a way for users to increase/decrease the font size for accessibility purposes is nice, but ideally we would be able to emulate this browser zoom behavior so that our media queries trigger appropriately as if the viewport itself was changing.

    # March 10, 2018 at 2:59 pm

    I asked at stack overflow and got no answers, so I made up my own solution using a bit of javascript. In my case I just needed to scale the page once per page load, but I answered my stack overflow question with an example that is a bit more dynamic. It will need some more work if anybody will use that solution in a production site.

    https://stackoverflow.com/questions/49064718/scaling-a-page-proportionally-including-media-queries/49214344#49214344

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag