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

According to Designing Websites for iPhone X iOS 11 introduces a new extension for the existing viewport meta tag called viewport-fit, which provides control over the insetting behavior. The default setting is auto, which will not cover the entire screen.

In order to disable the default inset behavior and cause the page to lay out to the full size of the screen, you can set viewport-fit to cover as shown here:

Without this setting existing techniques used for splash screens and full-size hero images may not display as expected on the iPhone X or other conformant iOS devices.