OGeek|极客世界-中国程序员成长平台

标题: ios - CSS背景大小: contain ignored on IOS? [打印本页]

---

作者: 菜鸟教程小白    时间: 2022-12-13 06:51
标题: ios - CSS背景大小: contain ignored on IOS?

我正在使用 stellar.js在我的网站上。这适用于所有设备和浏览器，iOS Safari 除外。

您可以在此处找到此错误的示例:http://www.pencilscoop.com/demos/Parallax_Project/Part1/index.html 在 iPhone Slide 7/8 上看起来像这样(background-size:cover; 没有被覆盖，其他背景也根本没有显示):

我尝试了不同的 css 属性，例如 background-position: center center, background-size: 620px 230px;, background-size: contains; 等等，但没有一个起作用。有人知道如何在 iOS Safari 中包含 bg-image 吗？

---

Best Answer-推荐答案

好的，我终于找到了在 iOS 设备上修复它的解决方案:

.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;
    }
}

关于ios - CSS背景大小: contain ignored on IOS?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29950871/

---

欢迎光临 OGeek|极客世界-中国程序员成长平台 (http://sqlite.in/)

Powered by Discuz! X3.4