为什么移动设备上此网页上的内容小于等于 320 像素宽度而不是 100% 宽度？

Question

我的问题是，在屏幕尺寸小于/等于 320 像素的移动设备上，内容未显示为 100% 宽，您可以在此图像中看到：

我还在这里上传了文件： http://files.ailola.com/tmp/v1/privacy.php

我已经能够弄清楚以下几点：

• 当我向 < html > 标签添加宽度时，例如 width=150%，我可以以某种方式解决问题，但它会破坏网站的其他区域。 我认为它可能与这条线有关：
• 当我删除 ID=container 的 DIV 时，问题不会发生。 然而，为容器编辑 styles 并没有给我带来任何解决方案。
• 该问题仅发生在 Chrome 浏览器（我的版本是 Mac OS 10.15.4 上的 83.0.4103.97（官方构建）（64 位））和 iOS（我的版本是 iPhone 6s 上的 13.3.1）。 但是在 Firefox 中，我无法重现该问题。 也许它只是与苹果有关。

删除链接的样式表也不能解决问题。

我只是不知道原因。 你有想法吗？ 非常感谢你的帮助。

Answer 1

由于默认的自动换行策略，您的页面上有多个paragraphs溢出容器。

要解决此问题，请对段落应用分词或 溢出样式：

p {
   ...,
   word-break: break-all;
}

或者

p {
   ...,
   overflow-wrap: break-word;
}

Answer 2

我用以下方法解决了这个问题：

@media only screen and (max-width: 320px)
#container {
    max-width: inherit;
    width: 100%;
    padding: 0 1em;
    word-break: break-word;
}

问题在于，在内容内部，您有链接，它们就像一个完整的单词，因此容器倾向于适应最长的单词（这个问题存在于某些具有长单词或表达式的语言中）。 在这些情况下，您必须使用属性word-break 。 你可以在这里找到更多信息

编辑：
显然，不推荐使用属性word-break的 value break-word 。 您也可以将属性overflow-wrap与值break-word一起使用，因为它具有类似的效果。

Answer 3

在第6行的元视口标签内设置initial-scale=1

Answer 4

我们必须给 header、页脚和#container 提供width: 100% 。

word-break 属性指定单词在到达行尾时应该如何中断。

p {
    word-break: break-word;
}

@media only screen and (max-width: 767px) {
    header, footer, #container {
    width: 100%;
    padding: 0 25px;
    }
}