为什么 CSS background-size: cover 在 iOS 的纵向模式下不起作用? [英] why does CSS background-size: cover not work in portrait mode on iOS?

问题描述

我正在尝试跨设备手动设置 splash-image.我这样做是通过检查 orientation(触摸设备)或 屏幕宽度与屏幕高度(无触摸)并相应地设置一个 url.

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.

然后我通过 Javascript 添加这个 CSS 规则:

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)

x 是根据方向和屏幕尺寸加载的图像.

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

我的问题是这在 landscape 模式下工作正常，但在我的 iPad 上的 portrait 模式下，加载了正确的图像(取决于纵向/横向)，但是它没有扩展到全屏大小.

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.

问题:
我不能在 iOS 的纵向模式下使用 CSS background-size 吗?

感谢您的帮助！

刚刚在我的安卓智能手机上试过.在那里工作正常.毫无意义，为什么它不能在 iPad 上运行.

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 -

提供启动图片:

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

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 的应用程序:为每个支持的 PNG 格式的方向创建启动图像.每个启动图像必须为 1024 x 748像素(横向)或 768 x 1004 像素(纵向).

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).

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

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

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

Update Your Info.plist Settings Specify values for the UISupportedInterfaceOrientations and UIInterfaceOrientation

和

并非所有浏览器都能识别背景尺寸的封面关键字，因此，只需忽略它即可.

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

所以我们可以通过根据方向将背景大小设置为 100% 的宽度或高度来克服这个限制.我们可以定位当前方向(以及 iOS 设备，使用 device-width).有了这两点，我认为您可以在 iOS 上以纵向模式使用 CSS 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: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 background-size: cover 在 iOS 的纵向模式下不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！