这篇文章记录一下工作中解决的一个CSS问题。

正常情况下，网页的内容超出了窗口大小后，浏览器是可以让用户滚动的。

现代的手机浏览器也可以在网页内容很大时，允许用户进行拖拽和缩放。

但有的时候，我们设计了一个单页面网页应用，我们希望这个页面仅仅保持浏览器窗口的大小，而不允许用户上下左右地滑动。

比如说，我有一个这样的页面：

它后面的背景是一张比窗口要大得多的图片，如果我们不做样式限定，那么很可能用户来回拖拽一下就会让网页四处漂移，就像下面这样：

这时候，通常的做法是用这样的CSS写法：

body,html {
    width: 100%;
    height: 100%;
    background-image: url(images/background.jpg);
    background-size: cover;
    overflow: hidden;
}

原本以为添加了overflow:hidden这个属性，就可以达到效果，但是在iPhone的Safari浏览器中，还是会出现这种情况：

解决方法是，添加一行position: fixed,如下：

body,html {
    position : fixed;
    width: 100%;
    height: 100%;
    background-image: url(images/background.jpg);
    background-size: cover;
    overflow: hidden;
}

这样，就在iPhone上达到了我们想要的效果：