Improve the "safe area" when reading with larger max-width in iOS Safari

Question

Improve the "safe area" when reading with larger max-width in iOS Safari

ivan opened this issue 2 years ago · 0 comments

unbook's viewport-fit=cover in <meta name="viewport" content="width=device-width, viewport-fit=cover" /> was used to prevent iOS Safari from applying the <body> background-color to the "safe area" in landscape mode (we want the <html> background-color instead).

But if the unbook max-width is set sufficiently high, it can make the left edge of the text run up to the very edge of the notch.

https://css-tricks.com/the-notch-and-css/

https://stephenradford.me/removing-the-white-bars-in-safari-on-iphone-x/

If there is no way to make iOS Safari use the <html> background-color, we might have to wrap everything in the <body> with a div to apply the lighter background color for the text.