Archived topic
Issues with with viewport on mobile in landscape view
1 reply · Started by Pierre on December 29, 2020
Hello guys,
I need help to fix my sites built with Generatepress to work nicely with the viewport on Mobile. Can you help to fix these issues?
1. In landscape mode in Mobile Chrome the entire page slips to the side easily and leaves whitespace on the sides.
2. In landscape mode in Mobile Safari it automatically leaves space on the sides. Hows the tabs from other open pages in Safari. Preferably the background colors and everything would extend all the way out to the sides.
//
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.
