为什么CSS背景大小:封面在iOS上无法在纵向模式下工作？

Question

我正试图在splash-image各种设备上进行手动设置.我这样做是通过检查orientation(触摸设备)或screen width vs. screen height(无触摸)并相应地设置URL.

然后我通过Javascript添加这个CSS规则:

 document.styleSheets[3].insertRule('.initHandler:before { 
    background: url('+x+') no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    }', 0)

随着x作为图像取决于方向和屏幕尺寸被加载.

我的问题是这在landscape模式下工作正常,但在我的iPad portrait模式下,加载了正确的图像(根据肖像/风景不同),但它没有扩展到全屏大小.

问题:
我不能background-size在纵横模式下在iOS上使用CSS 吗？

感谢帮助!

编辑:
刚试过我的Android智能手机.那里工作得很好.没有任何意义,为什么它不适用于iPad.

Answer 1

好.这是它的工作原理(感谢@iMeMyself):

body {
    background: url(...) no-repeat center center fixed; 
    -webkit-background-size: 100%; 
    -moz-background-size: 100%; 
    -o-background-size: 100%; 
    background-size: 100%; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    }

所以先将它设置为100%,然后再设置为cover.这样所有浏览器都无法cover获得100%的价值,而那些可以通过封面获得100%覆盖的浏览器.

Answer 2

在检查方向时,请注意苹果文件中的这些要点 -

提供发射图像:

仅限iPhone的应用程序可能只有一个启动图像.它应该是PNG格式,尺寸为320 x 480像素.将您的启动映像文件命名为Default.png.

仅限iPad的应用程序:为PNG格式的每个支持的方向创建启动图像.每个启动图像必须为1024 x 748像素(对于横向)或768 x 1004像素(对于纵向).

通用应用程序:包括iPhone和iPad的启动图像.

更新Info.plist设置指定UISupportedInterfaceOrientations和UIInterfaceOrientation的值

和

并非所有浏览器都能识别封面关键字的背景大小,因此,只需忽略它即可.

因此,我们可以通过将背景大小设置为100%宽度或高度来克服该限制,具体取决于方向.我们可以定位当前方向(以及iOS设备,使用设备宽度).有了这两点,我认为你可以background-size:cover在iOS上以纵向模式使用CSS

以下是我在寻找解决方案时遇到的一些其他资源:灵活的可扩展背景图像, 完全可扩展的背景图像,完美的可扩展背景图像以及此讨论.