Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 540
  • Last Modified:

IOS7 Web App keyboard orientation bug

IOS7 web apps specifically (webpages saved to home screen) have a bug when the keyboard is open, the device thinks that the screen height has changed to the viewable area minus the keyboard (288px high instead of 548px), which then applies css media queries meant for only landscape mode even though the device is still in portrait mode.

Some references:
http://stackoverflow.com/questions/19297821/keyboard-orientation-and-media-query-bug-app-mode
http://hype.desk.com/customer/portal/questions/3174313-screen-orientation-bug-in-ios-7-bug-for-home-screen-web-app
http://www.danielcwilson.com/blog/archives/18

We are looking for a solution to this, and none has yet been posted online.

Thanks
0
collages
Asked:
collages
1 Solution
 
RobOwner (Aidellio)Commented:
Have you got a sample link? How are you detecting the orientation. Purely css?
0
 
David S.Commented:
Timmah's suggestion on Stack Overflow might be the best workaround for now. However, you may want to add something to it to avoid styling smart-watches unintentionally.

Please try the following media queries and let us know whether each works. (I don't have iOS 7 at this time or I'd test them myself.)
@media only screen and (min-device-aspect-ratio:1/1) and 
   (max-device-aspect-ratio:3/2) and (min-device-height:480px) {

}

Open in new window

@media only screen and (min-device-aspect-ratio:1/1) and 
   (max-device-aspect-ratio:3/2) and (height:288px) {

}

Open in new window

0
 
GaryCommented:
I've requested that this question be deleted for the following reason:

The question has either no comments or not enough useful information to be called an "answer".
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now