移動端橫向溢出隱藏解決方法

今天製做網站自適應中，遇到一個問題：若是使用定位居中法， 在電腦端設置溢出隱藏起做用， 而在移動端中，右邊溢出卻能夠向右滑動。

具體代碼以下：

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標籤一同加入溢出隱藏代碼，防止特殊狀況可右滑動。