手機端頁面下端出現滑動條

標籤：view   dev   剪裁   user   沒有   本文   移動端   解決問題   ble   

項目中寫了自適應的手機頁面，在手機上可以正常顯示，但是下面有滑動框，可以向右滑動頁面，有大量的空白，沒有內容。

我解決問題的思路是，一開始懷疑是某個元素寬度過大，把寬度撐大了，用js把裝置寬度列印出來查看。

網頁可見地區寬： document.body.clientWidth
網頁可見地區高： document.body.clientHeight
網頁可見地區寬： document.body.offsetWidth (包括邊線的寬)
網頁可見地區高： document.body.offsetHeight (包括邊線的高)
網頁本文全文寬： document.body.scrollWidth
網頁本文全文高： document.body.scrollHeight
網頁被捲去的高： document.body.scrollTop
網頁被捲去的左： document.body.scrollLeft
網頁本文部分上： window.screenTop
網頁本文部分左： window.screenLeft
螢幕物理解析度的高： window.screen.height
螢幕物理解析度的寬： window.screen.width
螢幕可用工作區高度： window.screen.availHeight

螢幕可用工作區寬度： window.screen.availWidth

螢幕縮放因子：window.devicePixelRatio

螢幕邏輯解析度：window.screen.width * window.devicePixelRatio (縮放因子與物理解析度的乘積)

用console.log列印出來，看看body的尺寸，結果都是正常的尺寸。比如我的移動端調試尺寸是400*492，列印出的效果是一樣的。說明body的尺寸沒有問題。

參考地址：https://www.cnblogs.com/zdhblog/p/6845618.html

然後我仔細看了下viewport設定，也是常規的設定

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

沒有問題。

最後查資料，有人解決使用css的剪裁掉空白的辦法，也就是加上

html{     

width:100%;   

overflow-x:hidden;}

出現滑動，右側有空白的問題解決。

 

手機端頁面下端出現滑動條