ios - 为什么 CSS background-size : cover not work in portrait mode on 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 模式下，加载了正确的图像(因纵向/横向而异)，但是它不会扩展到全屏大小。

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

感谢您的帮助!

编辑:
刚刚在我的 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%，然后设置为覆盖。这样所有不能覆盖的浏览器都得到100%的值，而那些能得到100%覆盖的浏览器被覆盖。