手机端页面下端出现滑动条

Posted 2020-11-02 cooldream2009

项目中写了自适应的手机页面，在手机上可以正常显示，但是下面有滑动框，可以向右滑动页面，有大量的空白，没有内容。

我解决问题的思路是，一开始怀疑是某个元素宽度过大，把宽度撑大了，用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;}

出现滑动，右侧有空白的问题解决。