窗口缩放:网站大小问题和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

推荐答案

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

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

这篇关于窗口缩放:网站大小问题和html初始缩放值被忽略的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:窗口缩放:网站大小问题和html初始缩放值被忽略

基础教程推荐