Css Media Query Landscape Android Soft Keyboard

I'm working on a web application for tablets(for android and ios) and I'm facing a problem which is giving me trouble for 2 days already. The problem is that on android when you ar

Solution 1:

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.

Solution 2:

There is this good article to solve this problem.

But sometimes 13/9 is not enough. @media screen and (min-aspect-ratio: 14/9){ } // landscape

Becareful, if you increase it to 16/9, iphone5 don't recognize the landscape.

Solution 3:

Separate from min and max "-aspect-ratio" are min and max "-device-aspect-ratio" which are the parameters for the device rather than the screen.

@mediaonly screen and (max-device-aspect-ratio:1/1){
    section{background:purple;}
    :root{--devmul:1;}
}
@mediaonly screen and (min-device-aspect-ratio:1/1){
    section{background:orange;}
    :root{--devmul:0.5;}
}

Mozilla et al say the parameter is deprecated but they leave no note as to what it has been deprecated by. Im operating by the assumption that the deprecation is that the parameter is not supported on all devices (like desktop browsers) but is generally available on devices which have an orientation.

The above snippet operated in the context of assumption that the user is on a desktop which is then corrected according to "device-aspect-ratio" and the general aspect ratio. Havent had the opportunity to test my theory out on portrait based desktop devices but this seems to work on all the mobile devices I have.