2

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?

danstever
  • 43
  • 1
  • 6
  • Specific code will be helpful. – Jasper Dec 04 '12 at 20:40
  • I'm not even sure what I would provide here as it is not one specific snippet from the site. I suppose to add context - it appears to affect the content that is within the 'ui-content' container. The header for the site seems to render correctly. – danstever Dec 04 '12 at 20:46
  • I really am just referring to adding this in the head of the document: `` And then using media queries in my css like this: `@media only screen and (orientation:portrait) { #some-content { width: 350px; } } @media only screen and (orientation:landscape) { #some-content { width: 450px; } }` – danstever Dec 04 '12 at 20:52
  • iPhone 5 does not have this behavior - it does this on the 4s and down. – danstever Dec 05 '12 at 14:59
  • I'm not sure this will help but you could try: http://stackoverflow.com/questions/6448465/jquery-mobile-device-scaling/6457261#6457261 – Jasper Dec 05 '12 at 16:41

1 Answers1

1

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)">
Ortwin Gentz
  • 52,648
  • 24
  • 135
  • 213