user2389688 user2389688 - 5 months ago 143
Javascript Question

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 are in portrait mode and for example you focus an input field so the soft keyboard pops up the css media query orientation changes to landscape.
I already have read this question : CSS Media Query - Soft-keyboard breaks css orientation rules - alternative solution? and came up with this :

var is_keyboard = false;
var is_landscape = false;
var initial_screen_size = window.innerHeight;

window.addEventListener("resize", function() {

is_keyboard = (window.innerHeight < initial_screen_size);
is_landscape = (screen.height < screen.width);

}, false);

function updateViews()
$("html").removeClass("landscape portrait");

However this doesn't work for some reason.
Is there anyway to change the orientation to portrait mode so the css media query thinks
we are in portrait mode ? I prefer not the use max-width etc because I need to support multiple screen sizes.

Thanks in advance.


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.