[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

IOS7 Web App keyboard orientation bug

Posted on 2014-01-08
4
Medium Priority
?
546 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
3 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 43

Accepted Solution

by:
David S. earned 2000 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

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
Use Wufoo, an online form creation tool, to make powerful forms. Learn how to selectively show certain fields based on user input using rules to gather relevant information and data from your forms. The rules feature provides you with an opportunity…
Suggested Courses
Course of the Month9 days, 9 hours left to enroll

591 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