So I discovered something as I was working on this dragon banner. I wanted it to span the full width of the page, and on various browsers and iPhone portrait mode, it was doing just that. But when I switched to iPhone landscape, I noticed that the page was not filling up the full width.

I got into a little “alligator wrestling” with CSS, trying to get it to span the full width of the page by moving margins. I thought initially it was something in the CSS, so I gradually commented it all out. The issue was still there.

I then took a quick look at all number of other sites in iPhone landscape, including my other site, birdleymedia.com. I noticed that all of the other sites had this same issue, where the content did not cover the full width. And then it dawned on me — it is probably because of the notch on the iPhone.

The color of the two “gutters” on either side is determined by the background-color of the body element.

So you have two options:

  • use suitable style for the body attribute that you wouldn’t mind showing up on either side of the landscape

  • use a specific meta attribute, viewport-fit=cover, as shown below in your html pages;

I ultimately decided not to use the viewport-fit=cover technique because I just want to make sure that the notch doesn’t obscure anything. But I do see a lot of potential for apps and for sites that need to create an immersive experience.

More info on the notch and CSS can be found in this article on CSS Tricks by Chris Coiyer.