11

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);

updateViews();
}, false);


function updateViews()
{
  if(!is_landscape)
  {
      if(is_keyboard)
      {       
        $("html").removeClass("landscape portrait");
        $("html").addClass("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.

Community
  • 1
  • 1
JeffreyZ
  • 566
  • 3
  • 12

3 Answers3

22

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.

JeffreyZ
  • 566
  • 3
  • 12
  • Unfortunately this solution doesn't work in all mobile devices. – Diogo Cardoso Apr 07 '15 at 11:06
  • This solution is very rough and will not work on some devices. For example my phone gives about 17.7/9 when opening the soft keyboard, while the landscape aspect ratio is much less on many other devices. – raacer Aug 24 '15 at 16:39
  • I know its deprecated but "min-device-aspect-ratio" seems to work. Its based on device orientation rather than screen orientation so wont be available on desktop (which are almost exclusively landscape anyway). I cant see what this parameter is deprecated by so Im assuming the deprecation is about it "not being fully supported" (ie in desktop environments) – Stephen Duffy May 12 '20 at 01:12
1

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.

GBMan
  • 475
  • 2
  • 4
  • 16
  • 1
    And that's why you [don't give link only answers](https://meta.stackexchange.com/questions/8231/are-answers-that-just-contain-links-elsewhere-really-good-answers). At least archive the thing if you're going to link to it, but you really ought to give the answer in your answer, and not rely on a link and a 2-sentence summary. – Tijmen Sep 14 '17 at 15:41
0

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.

@media only screen and (max-device-aspect-ratio:1/1){
    section{background:purple;}
    :root{--devmul:1;}
}
@media only 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.

Stephen Duffy
  • 467
  • 2
  • 14