为什么即使我在 Chrome 调试工具中更改视口，网站的宽度也一样？答案

【问题标题】：Why is the width of a website the same even when I change the viewport in Chrome Debug Tools?为什么即使我在 Chrome 调试工具中更改视口，网站的宽度也一样？
【发布时间】：2018-12-30 18:40:11
【问题描述】：

我正在使用 Chrome 调试工具的 Viewport 模拟器。我觉得奇怪的是，无论视口宽度如何，Chrome 总是以像素为单位报告相同的宽度，并且缩放和 DeviceToPixelRation (DPR) 都没有变化。 h1 的样式将 width 设置为 100% 并且没有其他代码。我希望当视口宽度发生变化时，宽度或 DPR 都会发生变化。为什么没有发生？

代码如下：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        h1 {
            width: 100%;
            background: blue
        }
    </style>
</head>
<body>
<h1>
    Some header text here
</h1>

【问题讨论】：

@Turnip，添加了代码，但实际上什么都没有，除了只设置宽度的h1 样式
尝试在 head 标签上使用类似：跨度>
@Andy，是的，它现在将h1 的宽度调整为视口宽度。你能解释一下为什么会这样吗？
尝试使用max-width
我在答案中添加了文档链接

标签： html css google-chrome-devtools

【解决方案1】：

这是来自here的引用：

为了尝试提供最佳体验，移动浏览器会呈现桌面屏幕宽度的页面（通常约为 980 像素，尽管这因设备而异），然后尝试使内容看起来更好通过增加字体大小和缩放内容以适应屏幕。这意味着字体大小可能对用户来说似乎不一致，他们可能必须双击或捏合缩放才能查看和交互内容。

这就是为什么你的宽度不会改变。浏览器只是缩小整个网页以适应屏幕。

使用元视口值 width=device-width 指示页面以与设备无关的像素匹配屏幕宽度。

这就是它使用name="viewport"标签调整宽度的原因。

这似乎有效：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

有关更多信息，请阅读文档on viewport meta tag at MDN.：

视口元标记告诉浏览器屏幕的宽度应该被认为是页面的“全宽”。无所谓的意思您所在设备的宽度，无论是在台式机还是移动设备上。这网站将跟随用户所在设备的宽度。

【讨论】：

如果链接发生变化？ Stack Overflow 策略是让答案实际包含在答案中。
@ThisGuyHasTwoThumbs 这不是正确的做法。肉瘤是正确的。答案应该是独立的。
@Turnip 还不错，我刚刚看到了这么多赞成的答案，这只是一个带有文档链接的单行字 - 当然应该进行清除以避免将来对此产生混淆哈哈
@Andy，你的回答是关于shrink-to-fit吗？因为如果我删除它以使其成为content="width=device-width, initial-scale=1" 它仍然会调整宽度
非常感谢编辑，现在解释清楚多了

【解决方案2】：

一个非常简单的解决方案（可缩放的文本大小）：

<head>
<meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
        margin: 0;
        padding: 0;
    }

    h1 {
        font-size: 2vw;
        width: 100%;
        background: blue
    }
        </style>
        </head>
        <body>
        <h1>
           Some header text here
        </h1>

这将使文本大小缩放到视口的 2%。编辑：使用vw 格式也适用于所有具有宽度/高度的东西。

【讨论】：