從手機查看時，媒體查詢不適用於頁腳部分，但在調整瀏覽器屏幕大小時有效

Question

我遇到的問題是，從桌面查看時的頁腳部分非常敏感，當我將視口大小更改為移動設備和平板電腦時，它仍然可以響應。 但是當我從手機打開應用程序時，頁腳看起來沒有樣式。

這是從桌面 360px 看起來的樣子。 非常敏感，請在此處輸入圖片說明

但是在我的手機上，看起來像這樣在此處輸入圖片說明

這是現場站點的鏈接： https : //aginamena.github.io/Designo-Multi-Page-Website-/#/這里是 github repo： https : //github.com/aginamena/Designo-Multi-Page-Website-

Answer 1

這不是媒體查詢問題，而是頁腳容器中的 css 屬性 - position: absolute擾亂了 Safari 瀏覽器中的對齊方式。 我在桌面 Safari 響應式設計模式和 iPhone 設備 Safari 瀏覽器中看到了您的問題。 桌面 Chrome 和 Android 設備 Chrome 瀏覽器可以正常加載頁腳。

我建議創建一個帶有position: relative的頁腳容器position: relative和另一個帶有 flex 的 div 而不使用任何絕對定位。 然后根據需要調整邊距。