Question

我正在尝试跨设备设置一个manualy splash-image。我是通过检查orientation（触摸设备）或screen width vs. screen height（无触摸）并相应地设置网址来实现此目的。

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

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设备，使用设备宽度）。有了这两点，我认为你可以在iOS上以纵向模式使用CSS background-size:cover

以下是我在寻找解决方案时遇到的一些其他资源：Flexible scalable background images，full scalable background images，perfect scalable background images和this讨论。

Answer 3

此处代码

修复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;
  }
}

Answer 4

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

Answer 5

根据Designing Websites for iPhone X，iOS 11为现有的viewport元标记viewport-fit引入了一个新扩展，它可以控制插入行为。默认设置为auto，不会覆盖整个屏幕。

为了禁用默认插入行为并使页面布局到屏幕的完整大小，您可以将viewport-fit设置为cover，如下所示：

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

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

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

5 个答案: