How to get rid of blank space from iPhone notch on web page

Question

Hello, I'm not sure how to get rid of the empty space on the iPhone's top screen with the notch. Do you know how to change the default white background colour? I have a public website. If you want to view the code, it is available at https://natanluczak.pl. I'll show you a picture of it.

Answer 1

You should be looking for the meta-setting theme-color in the page's header, in my opinion.

<meta name="theme-color" content="#4285f4">

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color

However, because it's an Apple product... You never really know if they adhere to the industry norm, don't you think? If that doesn't work, you could attempt the web-app-status-bar styling, but your colour options are quite limited—you can only use the default colours of black or black translucent.

<meta name="apple-mobile-web-app-status-bar-style" content="black">

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html