[Support request] Mobile site in Landscape mode

[Ian]

Hi there,

Is there a way to force GeneratePress to show the desktop version of a website when a mobile is rotated to landscape mode? I don’t want to alter how anything looks on desktop so I’m guessing media queries for width won’t work.

On my Xperia XZ3 (2880×1440) it shows the primary menu (instead of offsite canvas) when rotated, but the menu items don’t fit on 1 line unless I select ‘Desktop site’ in chrome.

On my iPhone X (1125×2436) the whole website displays as the mobile version when rotated which makes some parts of the site look pretty bad.

Thanks

[Leo]

Hi there,

Unfortunately there isn’t a way to tweak that as far as I’m aware of.

The responsive layout completely depends on the screen width so there is no way to tell whether it’s in landscape or mobile mode.

If it’s just the navigation you are referring to, then this option might help:
https://docs.generatepress.com/article/mobile-navigation/#using-gp-premium

[Ian]

Hi Leo,

Many thanks for the reply.

The issue isn’t really with navigation, that’s just one aspect. I have the mobile breakpoint set as 768, however it’s not always working.

The Xperia XZ3 is 1440 x 2880 but does show the mobile version in portrait mode (and a broken version of the desktop menu in landscape mode (unless ‘Desktop site’ is selected)) so I’m wondering what else is dictating which version is served.

Thanks

[Leo]

Hmm if the Xperia is 1440px in width in portrait mode, then it should show the desktop menu as it’s larger than 768px.

Am I missing something here?

Would this option help a bit?
https://docs.generatepress.com/article/navigation-drop-point/

[Ian]

Hi Leo,

That’s exactly what’s confusing me! I believe there’s something else at play besides basic width.

If you go to any mobile responsive site and use google developer tools to emulate the iphone X you can see it’s showing 375×812 as the resolution (3 times the device’s actual resolution) which makes it display the mobile version of the site

Likewise if you visit a mobile responsive site on a phone with resolution higher than 768 width you will see the mobile menu, until you switch to ‘Desktop site’ in Chrome at which point the desktop menu kicks in (phones with lower native res than 768 keep the mobile menu).

I think it might be something to do with viewport and/or scale, but not sure where to look in GeneratePress or if there’s some javascript/jquery I can add that forces a phone to use it’s native resolution (only in landscape mode).

The 2 main issue I am trying to solve are:

1: Phone with width 2880px (XZ3 landscape) shows the desktop site (and primary menu) but the menu items don’t fit on 1 line and spill over to 2 lines.

2: Phone with width 2436px (iPhone X landscape) shows the mobile site with parts of the site displayed as a 768px ‘block’ instead of covering the width of the page.

Thanks again for your help 🙂

[Tom]

The standard media queries themselves target the screen width I believe – not the resolution.

The viewport in GP is filterable: https://github.com/tomusborne/generatepress/blob/2.4.2/inc/structure/header.php#L295

I just looked around to see if you could target orientation with it, but couldn’t find anything helpful, unfortunately.

The first step to solving this is to figure out the correct media query that will achieve what you’re after. Then we can see if we can apply it to GP.

[Ian]

Hi Tom,

Thanks for the reply.

For the menu I believe this fixes the issue:

@media only screen and (min-width: 375px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
.main-navigation a { font-size: 10px; } /* was 12px */ }

and for the other problem sections I plan on testing this:

@media screen and (max-width: 768px) and (-webkit-device-pixel-ratio: 1) { }
/* dpr1 for browsers and duplicating with dpr2 portrait for phones */

@media only screen and (min-width: 375px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { }

then for landscape mobiles this:

@media only screen and (min-device-width: 375px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { }

I’m looking at 375 not 384 (half 768) because of the iPhone, I think it leaves other gaps eg 1.1 – 1.9 dpr but seems like a good place to start.

Thanks

[Tom]

Awesome, you can filter the media query that GP uses for the mobile menu as well:

add_filter( 'generate_media_queries', function( $queries ) {
    $queries['mobile-menu'] = '(max-width:768px)';

    return $queries;
} );

[Author]

Posts