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
LVL 1
collagesAsked:
Who is Participating?
 
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
 
RobOwner (Aidellio)Commented:
Have you got a sample link? How are you detecting the orientation. Purely css?
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.