css背景大小:是否在IOS上忽略包含?
我正在我的网站上使用。这在所有设备和浏览器上都能完美运行,iOS Safari除外 您可以在此处找到此错误的示例: 在iPhone上,幻灯片7/8如下所示(css背景大小:是否在IOS上忽略包含?,ios,stellar.js,Ios,Stellar.js,我正在我的网站上使用。这在所有设备和浏览器上都能完美运行,iOS Safari除外 您可以在此处找到此错误的示例: 在iPhone上,幻灯片7/8如下所示(背景尺寸:封面;未被覆盖,而另一个背景则根本未显示): 我尝试了不同的css属性,比如背景位置:中-中,背景大小:620px 230px,背景尺寸:包含等等,但都不起作用。有人知道如何在iOS safari上包含bg图像吗?好的,我终于找到了在iOS设备上修复bg图像的解决方案: .slide { -webkit-b
背景尺寸:封面;
未被覆盖,而另一个背景则根本未显示):
我尝试了不同的css属性,比如
背景位置:中-中
,背景大小:620px 230px代码>,背景尺寸:包含代码>等等,但都不起作用。有人知道如何在iOS safari上包含bg图像吗?好的,我终于找到了在iOS设备上修复bg图像的解决方案:
.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;
}
}