問題描述

發現寫的h5頁面在手機端可以向右滑動，導致樣式出現問題～

問題排查

原因一：沒有進行移動端適配

在html頭部添加以下內容：

<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=no">

1. width=device-width 表示使頁面寬度等于設備的寬度
2. initial-scale=1.0 表示初始頁面寬度等于1倍設備寬度
3. user-scalable=no 表示不可改變

原因二：頁面元素寬度超過了設備寬度

在進行了上文的配置后，我的問題并沒有解決。通過檢查元素發現：我頁內的元素(紫色部分)的寬度超過了設備寬度，才導致了頁面可以滑動。

在修改了過寬的元素的css后，問題得到了解決。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。