html5手機(jī)端頁(yè)面可以向右滑動(dòng)導(dǎo)致樣式受影響的問(wèn)題

問(wèn)題描述

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

問(wèn)題排查

原因一：沒(méi)有進(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 表示使頁(yè)面寬度等于設(shè)備的寬度
2. initial-scale=1.0 表示初始頁(yè)面寬度等于1倍設(shè)備寬度
3. user-scalable=no 表示不可改變

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

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

在修改了過(guò)寬的元素的css后，問(wèn)題得到了解決。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。