Keyboard orientation and media query bug (app mode)

Question

1. Add this webpage to your iOS7 home screen
2. Open it, and focus the input field (the keyboard pops up)
3. The text turns red, as the phone thinks it is in

Answer 1

This is clearly an iOS7 bug. In my application I found that I can reliably distinguish portrait mode from landscape mode even when focused on an input field with the on screen keyboard open using this media query:

@media only screen and (device-width: 768px) and (device-height: 1024px) and 
    (min-aspect-ratio: 4/3) {
  /* landscape differences here */
}

I couldn't use orientation: landscape because the rule would get activated even in portrait mode if the keyboard is open.

I probably need a different rule for the iPhone but I haven't gotten that far yet.

Answer 2

innerHeight is now affected by the keyboard being up in iOS7. If you check the innerHeight vs innerWidth with the keyboard up when the device is in portrait you will find that the innerHeight < innerWidth so maybe the browser's orientation check is as simple as that instead of using the device orientation straight up.

Answer 3

The keyboard orientation bug effects some web browsers as well, not just app mode, but hopefully this can be used in either instance. It also seems to effect some Android devices.

Here's how I got around it for mobile web browsers:

@media only screen and (min-device-aspect-ratio:1/1) and 
                       (max-device-aspect-ratio:3/2)    {
 /* Landscape-to-portrait corrections here */
}

The idea is that this query can only fire if a screen is either a perfect square or close to square, a scenario that pretty much only occurs when a keyboard is raised on touchscreen devices. The aspect ratio values I've used translate to between 1 and 1.5, so as an example a 16:9 screen has an aspect ratio of 1.7777778 (16/9) and would not be targeted. Once the MQ fires, you can re-style the effected elements. This doesn't fix the bug, it just conceals it.

If an OS doesn't contain the bug, this query will never fire, so if Apple fixes this, you don't need to change your code if you don't want to.

If a device is genuinely flipped to landscape mode, the aspect ratio only increases, and even moreso if the keyboard is raised, so the bug should never appear when a device is on its side.

To my knowledge, there are no devices with square/almost-square screens out there that would pick up this media query (at the time of writing), but please correct me if I'm wrong.

This has been tested on an iPhone 5s in Safari, Dolphin and Mercury browsers running iOS7, and in Chrome on an Android One X running Android 4.2.1 (which also experiences the same bug orientation bug with keyboards).

I also checked to see if it would fire on a Blackberry Bold 9780 (480x360), and it didn't. I don't quite trust this, as the resolution should have made it fall within the target range and it loaded the other MQs just fine, so perhaps it assesses the aspect ratio based around the physical size of the screen instead of the number of pixels. This is potentially an instance where the media query applies your bug solution to a screen that isn't experiencing the bug.

It's not perfect, but it got me out of trouble after a lot of headaches.