why does CSS background-size: cover not work in portrait mode on iOS?

Question

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

Answer 1

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.