javascript - CSS Media query landscape android soft keyboard - Stack Overflow

admin管理员组

文章数量:1197558

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.

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.

• javascript
• jquery
• html
• css
• tablet

Share Improve this question Follow edited May 23, 2017 at 12:02 CommunityBot 111 silver badge asked May 31, 2013 at 7:53 JeffreyZJeffreyZ 56633 silver badges1212 bronze badges

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 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.

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.

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.

本文标签： javascriptCSS Media query landscape android soft keyboardStack Overflow