CSS Media Query - Soft-Keyboard Breaks CSS Orientation Rules - Alternative Solution

CSS Media query landscape android soft keyboard

After some searching I came up with this :

@media screen and (min-aspect-ratio: 13/9){ } // landscape
@media screen and (max-aspect-ratio: 13/9){ } // portrait

instead of

@media (orientation : landscape){ }
@media (orientation : portrait){ }

So if you are in the same boat as me I would advise you to just go
with this, so you spare yourself the headache.

CSS orientation automatically switches to landscape when iOS keyboard is active

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" />

Media Query Solution

Just use the orientation media query.

@media all and (orientation: portrait) { ... }

@media all and (orientation: landscape) { ... }

Of course you can just use media queries the regular way, but by using SASS (and probably LESS), you can change how your class works in different orientations by doing something like:

.my-class {
    background: [normal background]; // assuming the default is portrait
    @media all and (orientation: landscape) { 
        // override for landscape
        background: [landscape background];
    }
}

Android keyboard does not open when using media queries

Using Adam's research the issue is solved by avoiding using orientation. The solution that works for me is taken from this CSS3 'boilerplate', and uses min and max widths like so:

@media only screen and (max-width: 320px) {
   .address { display: none; }
}

@media only screen and (min-width: 321px) { 
    .address { display: block; }
}

This can be seen in action here - http://so.ajcw.com/android-keyboard-solved.htm (http://goo.gl/nNIm9)

However this solution is not ideal as using fixed dimensions will eventually break as devices resolutions change.

---

Related Topics