'Window scaling: website sizing issues and html initial-scale value is ignored

On Windows 10 scaling default set to 125% caused website sizing issues, so I replicated the issue increasing the Scale on Ubuntu.

I tried to fix the size changing the initial-scale value in this way

document.querySelector("meta[name=viewport]").setAttribute('content', 'width=device-width, initial-scale='+(1/window.devicePixelRatio));

but nothing changes. Also If I tried to remove the entire meta tag and nothing is changed

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

It seems to be completely ignored

As workraround I tried with this, the resizing works but the Material UI Select are openend in the wrong position

html {
    zoom: 0.8;
    -ms-zoom: 0.8;
    -webkit-zoom: 0.8;
    -moz-transform: scale(0.8);
    -moz-transform-origin: left top;
}

The index.html code is

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <meta http-equiv="x-ua-compatible" content="ie=edge"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  
        <link rel="icon" type="image/png" href="/assets/favicon.ico"/>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700&display=swap" />

        <style>
            html {
             zoom: 0.8;
             -ms-zoom: 0.8;
             -webkit-zoom: 0.8;
             -moz-transform:  scale(0.8);
             -moz-transform-origin: left top;
            }

        </style>
    </head>

    <body>
        <div id="root"></div>

        <script>
           document.querySelector("meta[name=viewport]").setAttribute('content', 'width=device-width, initial-scale='+(1/window.devicePixelRatio));

        </script>
    </body>

    <noscript>
        You need to enable JavaScript to run this app.
    </noscript>
</html>

I'm using React 17 and Material UI 5.2.5

htmlreactjsmaterial-uiresizeresponsive


Solution 1:[1]

When you set the initial scale to 1, you are asking the browser to set each CSS pixel to be the size of 1 view-port pixel. This isn't the same as the physical pixel size. Viewport pixels will be affected by OS zoom levels.

You can read a bit more about viewport pixels, CSS pixels, and device pixels here.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Fenton

Related Questions