mobile - Mobile browsers: overflow-x creating white space off right side of viewport

Question

Whenever I code a responsive website that can scale all the way down to the size of a watch, there is an overflow of white space off to the right of the viewport that enables the horizontal scroll bar. The fix is easy: wrap the body in a div, set its width to auto and overflow to hidden. My question is this: is this a common practice/method that a lot of you use or a common problem that a lot of you encounter? Is there a "cleaner" way around this?

And I am using this meta viewport tag:

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

Answer 1

一种适用于某些情况（但不一定是所有情况）的更简洁的方法是在 BODY 容器上应用溢出：隐藏。

它可能不起作用的原因是，在某些情况下，未能捕获溢出的容器可能在 DOM 中更深。