Hi there,
this article explains how:
https://stephenradford.me/removing-the-white-bars-in-safari-on-iphone-x/
For the viewport setting you can use this PHP Snippet:
add_filter( 'generate_meta_viewport', function() {
return '<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">';
} );
And then to adding the padding to the main elements try this CSS:
#page, #mobile-header, #site-navigation, .site-footer {
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
box-sizing: border-box;
}
However i am not sure what impact this will have on other browsers – so be sure to check carefully.