移动端横向溢出隐藏解决方法

今天制做网站自适应中，遇到一个问题：若是使用定位居中法， 在电脑端设置溢出隐藏起做用， 而在移动端中，右边溢出却能够向右滑动。

具体代码以下：

body {
  overflow-x:hidden;
}
.box {
  position:absolute;
  left:50%;
  width:500px;
  height:200px;
  background:red;
  margin-left:-250px;
  text-align:center;
}

右边溢出部分在移动端设备中，可向右滑动。查找了相关资料，最后的解决方法以下：

html, body {
  overflow-x:hidden;
}

给html也加入溢出隐藏，而不是仅仅body,便可解决此问题。

 

总结： 在作移动端页面时，若是要禁止横向滑动，须要给html及body标签一同加入溢出隐藏代码，防止特殊状况可右滑动。