CODEWITHSUNDEEP
jquery-mobilemobileweb
danstever
danstever

Reputation: 43

Mobile website always rendered as landscape when using Apple Smart App Banner - jQuery Mobile

I have a mobile version of a website that uses CSS media queries to determine orientation.

The layout changes based on landscape / portrait and adjusts widths accordingly.

Recently the companion native mobile app has been published in the Apple app store - and I implemented the Apple Smart App Banner.

The problem is that while the Smart Banner is displayed - the layout rendered is that for the landscape version - no matter the actual orientation.

This is an issue because in portrait everything looks funky.

I cannot find a workaround for this or what is going on.

To provide more context - this is a Rails project - mobile website is built using jQuery Mobile.

Has anyone else experienced this or know of a solution?

Upvotes: 2

Views: 511

Answers (1)

Ortwin Gentz
Ortwin Gentz

Reputation: 54111

I believe this is a bug. I suspect iOS just sets the "landscape" flag if the usable width is larger than the usable height. When displaying smart app banners on 3.5" iPhones, this is the case. On 4" iPhone, it's not. That's why you're seeing this issue only on older iPhones.

I found a hacky workaround by using max-aspect-ratio:

<link rel="stylesheet" href="/css/portrait.css" media="all and (max-aspect-ratio: 4/3)">
<link rel="stylesheet" href="/css/landscape.css" media="all and (orientation:landscape) and (min-width: 480px)">

Upvotes: 1

Related Questions