HTML 100% 寬度在手機上溢出 – 為什么？

Question

我創建了這個網站：

https://www.alex-bender.de/ …（正在進行中）

...在 CSS 中，我將頁面寬度設置為視口的 100%。 我相信我是照章辦事的。

因此，在我的桌面瀏覽器上，一切都顯示正常，即使我將 web 瀏覽器 window 縮小到可用的最小尺寸。

但是，當我在 Galaxy Flip 4 (Google Chrome) 上觀看同一頁面時，該頁面顯示得比視口大。 在 5 個菜單項中，我只看到前 4 個，我必須水平滾動才能看到第 5^個菜單項。

我怎樣才能讓這個頁面在移動設備上正常工作？ 我做錯了什么？

Answer 1

您缺少媒體查詢。 你應該先做移動，它更容易做。 因此，刪除 css 中的所有內容並重新開始，您可以使用開發人員工具在瀏覽器上設計它：（在 Opera 上，快捷方式是 ctrl + shift + i，在 chrome 上是 ctrl + shift + c）。 這里有一些 w3 可以更好地理解媒體查詢： w3schools.com