13

我正在尝试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模式下工作正常，但在我的 iPadportrait模式下，加载了正确的图像（取决于纵向/横向），但它没有扩展到全屏尺寸。

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

感谢帮助！

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

4

5 回答 5

21

行。这是它的工作原理（感谢@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% 覆盖的浏览器。

于 2012-10-04T19:44:20.313 回答
8

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

提供启动图像：

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

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

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

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

和

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

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

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

于 2012-09-26T12:56:01.970 回答
2

代码在这里

它为 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;
  }
}
于 2014-04-23T14:20:46.143 回答
2

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

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

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

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

于 2017-10-04T17:36:40.790 回答
1

据我所知，此方法适用于所有 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;
            }
        }
    }
}
于 2016-11-02T12:09:23.930 回答