Menu
I wish to use 100% screen width on iOS Safari for my website's header on a notched iOS/Android device and to achieve that I added the following viewport meta_tag on my page <head></head>:
<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>
Then on <header> element of my page I specified a css width of 100% (or 100vmin). I don't need to use env(safe-area-insets) padding on any of my webpages because they are styled in a particular way.
This is pretty much how Apple has described the iOS Safari web api for the notched iPhones on their official documentation but it doesn't seem to be working!
Am I missing something?
Edits: I'm on iOS Safari 13.3.1 on a iPhone 11 Pro Max.
731
Use `viewport-fit=cover` to fill the whole screen.
Default Viewport Settings The default width is 980 pixels. However, these defaults may not work well for your webpages, particularly if you are tailoring your website for a particular device.
Shrink to Fit - Sheet Size maximizes the usage of the paper size during calculation of the scaling factor. However, because of the layout of the content in the original document, the scaling may not produce the desired result. Clipping of the content may occur.
As of late 2019 Apple is now recommending to use a @supports(padding:max(0px)) { env() } query to detect and fix the notched environment for your website, like so:
@supports(padding:max(0px)) {
body, header, footer {
padding-left: min(0vmin, env(safe-area-inset-left));
padding-right: min(0vmin, env(safe-area-inset-right));
}
}
The query above and css is discussed at length over here.
85
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With