为什么 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屋!