为什么CSS背景大小：盖未在纵向模式下iOS上的工作吗？ [英] why does CSS background-size: cover not work in portrait mode on iOS?

问题描述

我想建立一个manualy 开机图像跨设备。我通过检查方向这么做（触摸设备）或屏幕宽度与屏幕高度（无触摸）并设置相应的URL。

然后我通过Javascript添加此CSS规则：

  document.styleSheets [3] .insertRule（'initHandler：前{
    背景：网址（'+ X +'）固定不重复中心中心;
    -webkit-背景大小：盖;
    -moz-背景大小：盖;
    -o-背景大小：盖;
    背景大小：盖;
    }'，0）
 

使用 X 是根据方向和屏幕尺寸要加载的图像。

我的问题是这样的工作正常景观模式，但在我的iPad在纵向模式，正确的图像加载（取决于纵向/横向不同），但它不扩大到全屏大小。

问：结果
我不能在纵向模式下iOS上使用CSS 背景大小？

感谢您的帮助！

编辑：结果
只是试图在我的Andr​​oid智能手机。工作正常那里。是没有意义的，为什么不能在iPad上运行。

解决方案

在检查方向，请注意这些点与苹果的文件 -

  

提供发射图片：

  
  

的 iPhone使用的应用的可能只有一个启动图像。它应该是PNG格式，并测量320×480像素。命名您的启动图像
  文件为Default.png。

  
  

的 iPad的专用应用程序：的为PNG格式每个支持的方向创建一个启动图像。每个启动图像必须是1024 x 748
  （景观）像素或768点¯x1004像素（纵向）。

  
  

的通用应用程序：的包括iPhone和iPad

推出的图像。
  
  

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

和

  

并非所有浏览器识别为背景大小封面关键字，并因此，简单地忽略它。

因此​​，我们可以克服这种限制的的背景大小设置为100％的宽度或高度，取决于方向的。我们可以针对当前的方向（以及iOS设备，使用设备的宽度）。有了这两点，我认为你可以使用CSS 背景大小：在纵向模式下盖在iOS

下面是我也碰到过，而寻找一个解决方案的一些其他资源：灵活可扩展的背景图像，全面可扩展的背景图片中的完美的可扩展的背景图像和的这个讨论。<​​/ p>

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

Then I add this CSS rule via Javascript:

 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 x being the image to be loaded depending on orientation and screen size.

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

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

Thanks for help!

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

解决方案

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

Provide Launch Images :

iPhone-only applications may 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 Settings Specify values for the UISupportedInterfaceOrientations and UIInterfaceOrientation

and

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

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:cover on iOS in portrait-mode

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 this discussion.

这篇关于为什么CSS背景大小：盖未在纵向模式下iOS上的工作吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！