为什么 CSS background-size:cover 在 iOS 上的纵向模式下不起作用？

why does CSS background-size: cover not work in portrait mode on iOS?

提问by frequent

I'm trying to set up a manualy splash-imageacross devices. I'm doing so by checking for orientation(touch devices) or screen width vs. screen height(none touch) and set a url accordingly.

我正在尝试splash-image跨设备手动设置。我这样做是通过检查orientation（触摸设备）或screen width vs. screen height（非触摸）并相应地设置一个网址。

Then I add this CSS rule via Javascript:

然后我通过 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)

With xbeing the image to be loaded depending on orientation and screen size.

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

My problem is this works fine in landscapemode, but on my iPad in portraitmode, the correct image is loaded (differ depending on portrait/landscape), BUT it is not expanded to fullscreen size.

我的问题是这在landscape模式下工作正常，但在我的 iPadportrait模式下，加载了正确的图像（取决于纵向/横向），但它没有扩展到全屏尺寸。

Question:
Can I not use CSS background-sizeon iOS in portrait-mode?

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

Thanks for help!

感谢帮助！

EDIT:
Just tried on my Android Smartphone. Works fine there. Makes no sense, why it doesn't work on iPad.

编辑：
刚刚在我的 Android 智能手机上试过。在那里工作正常。没有意义，为什么它在 iPad 上不起作用。

采纳答案by iMeMyself

While checking orientation please take note of these points from apple document -

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

Provide Launch Images :

iPhone-only applicationsmay only have one launch image. It should be in PNG format and measure 320 x 480 pixels. Name your launch image file Default.png.

iPad-only applications:Create a launch image for each supported orientation in the PNG format. Each launch image must be 1024 x 748 pixels (for landscape) or 768 x 1004 pixels (for portrait).

Universal applications:Include launch images for both iPhone and iPad.

Update Your Info.plist SettingsSpecify values for the UISupportedInterfaceOrientations and UIInterfaceOrientation

提供启动图像：

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

仅限 iPad 的应用程序：以 PNG 格式为每个支持的方向创建启动图像。每个启动图像必须为 1024 x 748 像素（横向）或 768 x 1004 像素（纵向）。

通用应用程序：包括 iPhone 和 iPad 的启动图像。

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

and

和

Not all browsers recognize the cover keyword for background-size, and as a result, simply ignore it.

并非所有浏览器都能识别 background-size 的 cover 关键字，因此，只需忽略它。

So we can overcome that limitation by setting the background-size to 100% width or height, depending on the orientation. We can target the current orientation (as well as the iOS device, using device-width). With these two points I think you can use CSS background-size:coveron iOS in portrait-mode

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

Here are some other resources I also came across while looking for a solution: Flexible scalable background images, full scalable background images, perfect scalable background images, and thisdiscussion.

以下是我在寻找解决方案时还遇到的其他一些资源：灵活的可缩放背景图片、 完全可缩放背景图片、完美可缩放背景图片和本讨论。

回答by frequent

Ok. Here is how it's working (Thanks to @iMeMyself):

好的。这是它的工作原理（感谢@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; 
    }

So first set it to 100%, then to cover. This way all browser that cannot coverget the 100% value, while the ones that can get the 100% overwritten by cover.

所以首先将其设置为100%，然后设置为cover。这样所有无法cover获得 100% 值的浏览器，而那些可以 100% 被覆盖覆盖的浏览器。

回答by comonitos

Code here

代码在这里

It fixing background images for ipad

它修复了 ipad 的背景图像

Just enter sizes according to your image dimentions

只需根据您的图像尺寸输入尺寸

/* 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;
  }
}

回答by Josh Habdas

According to Designing Websites for iPhone XiOS 11 introduces a new extension for the existing viewportmeta tag called viewport-fit, which provides control over the insetting behavior. The default setting is auto, which will not cover the entire screen.

根据iPhone X 网站设计，iOS 11 为现有的viewport元标记引入了一个新的扩展，称为viewport-fit，它提供了对插入行为的控制。默认设置为auto，不会覆盖整个屏幕。

In order to disable the default inset behavior and cause the page to lay out to the full size of the screen, you can set viewport-fitto coveras shown here:

为了禁用默认的插入行为并使页面布局为屏幕的全尺寸，您可以设置viewport-fit为cover如下所示：

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

Without this setting existing techniques used for splash screens and full-size hero images may not display as expected on the iPhone X or other conformant iOS devices.

如果没有此设置，用于闪屏和全尺寸英雄图像的现有技术可能无法在 iPhone X 或其他符合标准的 iOS 设备上按预期显示。

回答by Russ Jones

As far as I'm aware, this method works on all IOS devices. Depending on your other page elements (header etc) you may need to adjust z-index for the &:before psuedo-element.

据我所知，此方法适用于所有 IOS 设备。根据您的其他页面元素（标题等），您可能需要调整 &:before 伪元素的 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;
            }
        }
    }
}