窗口缩放：网站大小问题和html初始缩放值被忽略

2022-04-06 00:00:00 resize reactjs html material-ui responsive

在Windows 10上，默认的伸缩率设置为125%会导致网站大小问题，所以我在Ubuntu上重复了这个问题，增加了伸缩率。

我尝试通过这种方式更改initial-scale值来修复大小

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

但什么都没有改变。另外，如果我尝试删除整个meta标记，但没有任何更改

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

它似乎完全被忽略

正如我尝试的解决方法一样，调整大小起作用了，但材质UISelect处于错误的位置

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

index.html代码为

<!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>

我使用的是Reaction 17和Material UI 5.2.5

解决方案

当您将初始比例设置为1时，您是在要求浏览器将每个css像素设置为1个视区像素的大小。这与物理像素大小不同。视区像素将受操作系统缩放级别的影响。

您可以阅读有关viewport pixels, CSS pixels, and device pixels here的更多信息。

相关文章