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

Window scaling: website sizing issues and html initial-scale value is ignored(窗口缩放：网站大小问题和html初始缩放值被忽略)

本文介绍了窗口缩放：网站大小问题和html初始缩放值被忽略的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在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

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

问题描述

推荐答案

基础教程推荐