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

Question

我遇到的问题是，在屏幕尺寸为 less/equal 320px 的移动设备上，内容未显示为 100% 宽，您可以在这张图片中看到：

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

我已经弄清楚了以下几点：

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

删除链接的样式表也没有解决问题。

就是想不通原因。你有好主意吗？非常感谢您的帮助。

Answer 1

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

要解决此问题，请对您的段落应用 word-break or overflow-wrap 样式：

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。您可以找到更多 info here

编辑：
显然，属性 word-break 的值 break-word 已被弃用。您也可以使用属性 overflow-wrap 和值 break-word，因为它具有类似的效果。

Answer 3

在第 6

行的元视口标记内设置 initial-scale=1

Answer 4

我们必须给页眉、页脚和#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;
    }
}

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

Why is the content on this webpage on a mobile device with smaller equal 320px width not 100% wide?

html

css

viewport

width