CSS orientation automatically switches to landscape when iOS keyboard is active

Question

I am making a non-native iOS application in Xcode using cordova(phonegap) and the angularJS framework

I am differentiating between css properties in different orientations by using:

@media all and (orientation:portrait) {  }

and

@media all and (orientation:landscape) { }

In Xcode simulator in portrait mode, when a text field is clicked on, the onscreen keyboard pops up. When this happens, it switches to the css of the landscape mode while still keeping portrait orientation. This obviously messes up all formatting.

Would appreciate any suggestions to why this might be happening. Thanks in advance.

Answer 1

I had a similar issue with portrait/landscape mode in iOS 7 and this fixed it:

Check your html meta tags for something like this:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">

Replace it with this:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />

Answer 2

To fix this issue try changing your orientation checks to aspect ratio :

Replace

@media screen and (orientation : landscape)

with

@media screen and (min-aspect-ratio: 13/9)

Replace

@media screen and (orientation : portrait)

with

@media screen and (max-aspect-ratio: 13/9)

Source : https://www.robinosborne.co.uk/2014/09/12/android-browsers-keyboards-and-media-queries/