ios - CSS背景大小: contain ignored on IOS?
<p><p>我正在使用 <a href="https://github.com/markdalgleish/stellar.js" rel="noreferrer noopener nofollow">stellar.js</a>在我的网站上。这适用于所有设备和浏览器，iOS Safari 除外。</p>
<p>您可以在此处找到此错误的示例:<a href="http://www.pencilscoop.com/demos/Parallax_Project/Part1/index.html" rel="noreferrer noopener nofollow">http://www.pencilscoop.com/demos/Parallax_Project/Part1/index.html</a>
在 iPhone Slide 7/8 上看起来像这样(<code>background-size:cover;</code> 没有被覆盖，其他背景也根本没有显示):</p>
<p> <img src="/image/lZusE.png" alt="enter image description here"/> </p>
<p>我尝试了不同的 css 属性，例如 <code>background-position: center center</code>, <code>background-size: 620px 230px;</code>, <code>background-size: contains;</code> 等等，但没有一个起作用。有人知道如何在 iOS Safari 中包含 bg-image 吗？</p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>好的，我终于找到了在 iOS 设备上修复它的解决方案:</p>
<pre><code>.slide {
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
background-origin: content-box;
-moz-background-origin: content;
-webkit-background-origin: content-box;
}
@media
/* ----------- iPhone 4 and 4S ----------- */
only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2),
/* ----------- iPhone 5 and 5S ----------- */
only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2),
/* ----------- iPhone 6 ----------- */
only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2),
/* ----------- iPhone 6+ ----------- */
only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3),
/* ----------- iPad mini ----------- */
only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1),
/* ----------- iPad 1 and 2 ----------- */
only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1),
/* ----------- iPad 3 and 4 ----------- */
only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
.slide {
background-attachment: scroll;
}
}
</code></pre></p>
<p style="font-size: 20px;">关于ios - CSS背景大小: contain ignored on IOS?，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/29950871/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/29950871/
</a>
</p>
页:
[1]