Chrome-Dev-Tools 中的移動視圖是否強制縮放？

Question

在我看來，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>

對我來說，當進入移動視圖時，綠色 div 的大小和字體大小相對於窗口寬度進行縮放。 但是，我希望它具有100px的恆定高度。 在正常情況下，一切都符合預期，沒有縮放。

我在這個 gif 中記錄了這種行為： Chrome Resizing

我是否對 css 有根本的誤解，或者這是 Chrome 的特殊行為？ 我應該如何創建恆定高度的 div，以便我可以在 Chrome 中使用它們？ 謝謝！

Answer 1

@Liveindream 的評論解決了我的問題：

嘗試將<meta name="viewport" content="width=device-width, initial-scale=1.0">到您的<head> 。

這樣，瀏覽器就無法對頁面應用縮放。 縮放是一種瀏覽器策略，可將無響應的舊網站放入智能手機屏幕。 在此處閱讀更多相關信息。

Chrome-Dev-Tools 中的移動視圖是否強制縮放？

問題描述

1 個解決方案

解決方案1
4 已采納 2020-01-09 11:39:27

Chrome-Dev-Tools 中的移動視圖是否強制縮放？

問題描述

1 個解決方案

解決方案1 4 已采納 2020-01-09 11:39:27

解決方案1
4 已采納 2020-01-09 11:39:27