为什么CSS的background-size: cover在iOS竖屏模式下无法正常工作？

Question

我正试图在各种设备上手动设置 splash-image。 我这样做的方式是通过检查 orientation（触摸设备）或 屏幕宽度 vs. 屏幕高度（非触摸设备）并相应地设置 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作为要根据方向和屏幕大小加载的图像。

我的问题是，这在横屏模式下运行良好，但在我的iPad上的竖屏模式下，正确的图像被加载（根据纵横比不同），但它没有展开到全屏尺寸。

问题:
我不能在iOS的竖屏模式下使用CSS的background-size吗？

谢谢帮助！

编辑:
刚试用了我的Android智能手机，在那里工作正常。不明白为什么它不能在iPad上工作。

- frequent

---

@boltclock，我知道你已经在http://stackoverflow.com/questions/11216432/css-background-position-and-ios#11216432问题上发表了评论，请再次阅读并尝试理解这个问题是不同的。 - iMeMyself

我已经在iPad上测试了这个页面http://www.css3.info/demos/background-size-cover.html，并且它在纵向和横向都可以工作，所以可能还有其他问题。你能提供一个完整的代码示例吗？ - Giona

@GionaF：我猜是因为我的旧iPad1（iOS3），因为你提到的链接在我的设备上无法调整大小。你用的是哪个iPad版本？ - frequent

2，iOS6...所以也许你可以使用像http://louisremi.github.com/jquery.backgroundSize.js/demo/这样的jQuery备用方案。 - Giona

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％的值，而可以的浏览器则会被cover覆盖。

- frequent

---

最好使用“background-size：auto 100vh”，因为iPhone在100％时会被放大。实际上，这种方法甚至都不起作用... iPhone尝试使用“cover”，结果照片很糟糕。 - Martin Zvarík

Answer 2

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

提供启动图像:

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

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

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

更新您的信息属性列表（Info.plist）设置 指定UISupportedInterfaceOrientations和UIInterfaceOrientation的值

以及

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

所以我们可以通过根据方向设置background-size为100%宽度或高度来克服这种限制。我们可以针对当前方向（以及iOS设备，使用device-width）。有了这两个要点，我认为你可以在iOS纵向模式下使用CSS background-size: cover 。

这里还有其他一些资源，我在寻找解决方案时也遇到了：灵活可缩放的背景图像，完全可缩放的背景图像，完美缩放的背景图像和此讨论。

- iMeMyself

---

@Rachel 谢谢修改。我会以类似的格式发布我的回答 :) - iMeMyself

Answer 3

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

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

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

没有这个设置，用于启动画面和全屏英雄图像的现有技术可能无法在iPhone X或其他符合iOS设备上按预期显示。

- vhs

Answer 4

代码如下

修复iPad的背景图片显示问题

只需根据您的图片尺寸输入相应的大小即可。

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

- Tim Kozak

Answer 5

据我所知，这种方法适用于所有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;
            }
        }
    }
}

- Russ Jones