Portrait mode gets misinterpreted as landscape when keyboard is on

Question

I am developing a web application targeting tablets and mobiles. The system is designed to be usable, thus landscape mode as well as portrait mode must be both supported. So, when the user changes orientation my web application will fire some events to rearrange the page accordingly.

Portrait mode is misinterpreted as landscape when keyboard appears

Here is the problem. In all pages of my web application there is the search control consisting in a textbox and a button. When I am in portrait mode and click on the textfield, the keyboard shows and the viewport size changes having height < width which causes my application to go landscape while the device is in portrait. When the user leaves the focus from the field, the keyboard disappears and the portrait mode is correctly recovered back.

Take a look at the picture up here: when the user searches something, the landscape mode is activated. Why? Simple: Because the viewport has changed due to the keyboard showing and the final viewport has a height lower than width.

Without the keyboard on, we have Height1 > Width1 , but when the keyboard is on we have that Height2 < Width2 but having Width2 = Width1 .

All devices involved

As you can imagine, this is a problem actually involving all devices:

• Android
• Apple iOS
• Windows

devices.

Do you know how to fix this problem? What type of approaches is it possible to take to target such a scenario?

Answer 1

an Excert from https://web.archive.org/web/20160509220835/http://blog.abouthalf.com/development/orientation-media-query-challenges-in-android-browsers/

To solve the twitchy keyboard problem, we need to replace blunt catch-all terms like 'portrait' with an aspect ratio that captures our weird keyboard edge case.

From above, we know that the screen dimensions of the Droid Razr, in portrait orientation, with the keyboard displayed, are 360px by 253px. Divide 360 by 253 and you get 1.4 (rounded to the nearest tenth). While we could just write an aspect ratio media query like min-aspect-ratio: 360/253, that's a little too specific to one device. So instead we'll use 13 to 9. That also equals roughly 1.4 but it's easier on the eyes.

For landscape media:

 @media screen and (min-aspect-ratio: 13/9) { /* landscape styles here */}

And for portrait media:

 @media screen and (max-aspect-ratio: 13/9) { /* portrait styles here */}

Answer 2

It also depends how are you getting current orientation, Are you using Sensor ? Result may differ from physical orientation and screen proportions