Chrome-Dev-Tools 中的移动视图是否强制缩放？

Question

Chrome-Dev-Tools 中的移动视图是否强制缩放？

Rap*_*ael 2 html css mobile google-chrome

在我看来，Chrome（与 Firefox 相比）在使用开发人员工具的移动视图时会自动缩小某些 html 内容：

以这个最小的例子为例：

<html>
    <head>
        <style>
            html {
                height: 100%;
            }
            body {
                height: 100%;
                margin: 0;
                font-size: 40px;
            }
            .test {
                background-color: lime;
                height: 100px;
                padding: 20px;
            }
        </style>
    </head>

    <body>
        <div class="test">Test Test Test</div>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

对我来说，当进入移动视图时，绿色 div 的大小和字体大小相对于窗口宽度进行缩放。但是，我希望它具有恒定的高度100px。在正常视图中，一切都如预期，没有缩放。

我已在此 gif 中记录了此行为： Chrome Resizing

我对 css 是否有根本性的误解，或者这是 Chrome 的特殊行为？我应该如何创建恒定高度的 div，以便我可以在 Chrome 中使用它们？谢谢你！

Answer 1

Rap*_*ael 9

@Liveindream 的评论解决了我的问题：

尝试添加<meta name="viewport" content="width=device-width, initial-scale=1.0">到您的<head>.

这样，浏览器就无法对页面应用缩放。缩放是一种浏览器策略，旨在将无响应的旧网站适应智能手机屏幕。在这里阅读更多相关信息。

归档时间：	6 年前
查看次数：	2294 次
最近记录：	6 年前