Removing the White Bars in Safari on iPhone X

Removing the White Bars in Safari on iPhone X

The new iPhone X features a beautiful edge-to-edge display. Well, almost. There is the small issue of a notch at the top of the browser which doesn't cause an issue when viewing websites in portrait but by default does cause some issues in landscape. To accommodate the notch iOS 11 constrains websites within a "safe area" on the screen. On most websites this results in letterboxing on the left and the right. Thankfully there are two simple fixes that can be made to solve this letterboxing. background-color If your website uses a single solid colour for its background…