【问题标题】:css background-size: contain ignored on IOS?css background-size:包含在 IOS 上被忽略的内容?
【发布时间】:2015-04-29 17:45:13
【问题描述】:

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

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

我尝试了不同的 css 属性,例如 background-position: center centerbackground-size: 620px 230px;background-size: contain; 等等,但它们都不起作用。有人知道如何在 iOS Safari 中包含 bg-image 吗?

【问题讨论】:

    标签: ios stellar.js


    【解决方案1】:

    好的,我终于找到了在 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;
        }
    }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-06-16
      • 2018-10-05
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多