Solved

IOS7 Web App keyboard orientation bug

Posted on 2014-01-08
4
527 Views
Last Modified: 2014-02-09
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
Comment
Question by:collages
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
4 Comments
 
LVL 43

Expert Comment

by:Rob
ID: 39767153
Have you got a sample link? How are you detecting the orientation. Purely css?
0
 
LVL 42

Accepted Solution

by:
David S. earned 500 total points
ID: 39767186
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
 
LVL 58

Expert Comment

by:Gary
ID: 39845679
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

SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article we will discuss all things related to StageFright bug, the most vulnerable bug of android devices.
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Learn how to set-up PayPal payment integration in your Wufoo form. Allow your users to remit payment through PayPal upon completion of your online form. This is helpful for collecting membership payments, customer payments, donations, and more.
Suggested Courses

630 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question