問題描述

發(fā)現(xiàn)寫的h5頁面在手機(jī)端可以向右滑動(dòng)，導(dǎo)致樣式出現(xiàn)問題～

問題排查

原因一：沒有進(jìn)行移動(dòng)端適配

在html頭部添加以下內(nèi)容：

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

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

原因二：頁面元素寬度超過了設(shè)備寬度

在進(jìn)行了上文的配置后，我的問題并沒有解決。通過檢查元素發(fā)現(xiàn)：我頁內(nèi)的元素(紫色部分)的寬度超過了設(shè)備寬度，才導(dǎo)致了頁面可以滑動(dòng)。

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。