Addressing iPhone X* crop bars in Landscape mode
* All iPhones with the notch on top of the screen: iPhone X, XS, XS Max, XR, 11, 11 Pro, 11 Pro Max
Problem: sites on iPhone X* are cropped in mobile Safari, to cope with the Notch. White bars appear on right and left side of the viewport.
Solution 1: add a background color to the body.
Problem: it only affects the background color of the site, it doesn't address the issues with the content, that's still cropped.
Solution 2: use a custom code in the Head section of your website to define the viewport-fit as cover.
Problem: the content doesn't take the notch into account.
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
Fine tuning: Adjust CSS for the notch. Don't forget to test your site with the phone in every direction.
