為什么移動設備上此網頁上的內容小於等於 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;
    }
}