In the project, an adaptive mobile page is written, which can be displayed normally on the mobile phone, but there is a sliding box below, and the page can be swiped to the right. There is a lot of blank space and no content.
My idea of solving the problem is that at the beginning, I suspected that the width of an element was too large, and the width was enlarged, and I used js to print the device width for viewing.
The width of the visible area of the
web page: document.body.clientWidth The height
of the visible area of the
web page: document.body.clientHeight Height)
Web page body full text width: document.body.scrollWidth
Web page text full text height: document.body.scrollHeight
Web page scrolled height: document.body.scrollTop
web page scrolled left: document.body.scrollLeft
web page body part : window.screenTop
page body part left: window.screenLeft
height of
screen physical resolution: window.screen.height width of screen physical resolution: window.screen.width
screen available workspace height: window.screen.availHeight
Screen available workspace width: window.screen.availWidth
Screen scaling factor: window.devicePixelRatio
Screen logical resolution: window.screen.width * window.devicePixelRatio (the product of scaling factor and physical resolution)
Use console.log to print it out to see the size of the body, and the results are all normal sizes. For example, the debugging size of my mobile terminal is 400*492, and the printed effect is the same. Explain that the size of the body is not a problem.
Reference address: https://www.cnblogs.com/zdhblog/p/6845618.html
Then I carefully looked at the viewport settings, which are also regular settings
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
no problem.
Finally, I checked the information, and someone solved the method of using css to cut out the blanks, that is, adding
html{
width:100%;
overflow-x:hidden;}
There is a slide, and the problem with a blank space on the right is solved.