为什么CSS background-size：cover在iOS的纵向模式下不工作？
我试图在各种设备上设置一个手动的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模式下工作正常，但在portrait模式下我的iPad，加载正确的图像（根据不同的肖像/风景），但它没有扩大到全屏尺寸。
问题 ：
我不能在纵向模式下的iOS上使用CSS background-size吗？
感谢帮助！
编辑：
刚试过我的Android智能手机。 在那里工作很好。 没有意义，为什么它不适用于iPad。
在检查方向时，请注意从苹果文件这些点 –
提供启动图像：
仅限iPhone的应用程序可能只有一个启动映像。 它应该是PNG格式，尺寸为320 x 480像素。 将您的启动映像文件命名为Default.png。
仅适用于iPad的应用程序：为PNG格式的每个支持方向创build启动图像。 每个启动图像必须是1024 x 748像素（横向）或768 x 1004像素（纵向）。
通用应用程序：包括iPhone和iPad的启动图像。
更新您的Info.plist设置指定UISupportedInterfaceOrientations和UIInterfaceOrientation的值
和
并不是所有的浏览器都能识别背景大小的封面关键字，因此，简单地忽略它。
所以我们可以通过将背景大小设置为100％宽度或高度来解决这个限制，具体取决于方向 。 我们可以定位目前的方向（以及iOS设备，使用设备宽度）。 有了这两点，我认为你可以使用CSS background-size:cover在纵向模式下的iOS上
以下是我在寻找解决scheme时遇到的一些其他资源： 灵活的可缩放背景图像 ， 完全可缩放的背景图像 ， 完美的可缩放背景图像以及此次讨论。
好。 这是它的工作原理（感谢@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％的覆盖。
代码在这里
它修复了iPad的背景图像
只要input尺寸根据您的图像尺寸
/* Page background-image landscape for iPad 3 */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) { .introduction-section { -webkit-background-size: 2024px 768px !important; background-size: 2024px 768px !important; background: url('background-image.jpg') no-repeat center top #000 !important; } } /* Page background-image portrait for iPad 3 */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) { .introduction-section { -webkit-background-size: 2024px 768px !important; background-size: 2024px 768px !important; background: url('background-image.jpg') no-repeat center top #000 !important; } } /* Page background-image landscape for iPad 1/2 */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) { .introduction-section { background: url('background-image.jpg') no-repeat center top #000 !important; -webkit-background-size: 2024px 768px !important; background-size: 2024px 768px !important; } } /* Page background-image portrait for iPad 1/2 */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) { .introduction-section { background: url('background-image.jpg') no-repeat center top #000 !important; -webkit-background-size: 5024px 2024px !important; background-size: 5024px 2024px !important; } }
据我所知，这种方法适用于所有的IOS设备。 根据你的其他页面元素（头文件等），你可能需要调整＆：before psuedo-element的z-index。
html { height:100% !important; } body { height:100%; min-height:100%; overflow-x:hidden; overflow-y:auto; // use your own class here // &.body-class { // @screen-xs-max is a Bootstrap3 variable name // @media screen and (max-width:@screen-xs-max) { min-height:100vh; position:relative; &:before { position:fixed; top:0; left:0; right:0; bottom:0; display:block; content:""; z-index:-1; background-image:url(background-image.jpg); background-position:center; background-size:cover; // Add this unless you compile your LESS using a preprocessor which adds vendor prefixes // -webkit-background-size:cover; } } } }
根据iPhone X的devise网站， iOS 11引入了一个名为viewport-fit的现有viewport元标签的新扩展，它可以控制embedded行为。 默认设置是auto ，不会覆盖整个屏幕。
为了禁用默认的插入行为，并使页面布局到屏幕的全尺寸，可以设置viewport-fit来cover ，如下所示：
<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>
如果没有此设置，用于启动屏幕和全尺寸英雄图像的现有技术可能无法按照预期在iPhone X或其他符合iOS设备上显示。