CSS背景延伸到Safari浏览器，但不是在iOS上
这个CSS成功地拉伸了我的背景图片，以填充100％的屏幕区域，而不是在Safari上滚动，但不在iOS上滚动。 我怎样才能防止在iOS上滚动的图像？
body { width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: url(../img/background.jpg) center repeat-x; background-size: auto 100%; background-attachment: fixed } body { width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: url(../img/background.jpg) center repeat-x fixed; }
我放弃了试图让我的iPhone与CSS很好地玩，并不得不诉诸使用jQuery。
在我的网页中，我添加了一个我想填充屏幕的<div> ：
<body> <div class="cssFullScreen" /> ...etc...
然后，我添加了两个CSS的汤匙…
<style> .cssFullScreen { position: absolute; left:0px; top:0px; background: url(BackgroundImage.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } </style>
..和一个jQuery的不情愿的独家新闻…
<script src="jquery-2.2.3.min.js"></script> <script type="text/javascript"> $().ready(function () { ResizeWindows(); $(window).resize(function () { ResizeWindows(); }); }); function ResizeWindows() { // When the user resizes the window, we'll resize any DOM elements // with the "cssFullScreen" class. var width = window.innerWidth ? window.innerWidth : $(window).width(); var height = window.innerHeight ? window.innerHeight : $(window).height(); $(".cssFullScreen").width(width); $(".cssFullScreen").height(height); } </script>
这不是很好，但它是唯一能find真正在iPhone上工作的东西。
奇怪的是，这个代码只适用于一个div （在iPhone上）。 如果我试图直接将它应用到html或body ，它什么也没有做。