Can CSS media queries detect portrait / landscape tablet mode?

Question

given that in JS is pretty easy .... something like

if(window.innerHeight > window.innerWidth){ portrait = true; }else{ portrait = false; } 

and I can use this ... but I wonder if this can be done using only the css and @media styles.

is it possible something like

 @media only screen and (width > height) { //... } 

Answer 1

CSS to determine screen orientation:

  @media screen and (orientation:portrait) { … } @media screen and (orientation:landscape) { … } 

CSS CSS request definition: http://www.w3.org/TR/css3-mediaqueries/#orientation

Answer 2

 @media all and (orientation:portrait) { /* Style adjustments for portrait mode goes here */ } @media all and (orientation:landscape) { /* Style adjustments for landscape mode goes here */ } 

but it still looks like this: experiment

Answer 3

I think we need to write a more specific media query. Make sure that you write one multimedia request, this should not affect the other presentation (Mob, Tab, Desk), otherwise it may be a problem. I would suggest writing one basic multimedia query for the relevant device, which will cover both viewing and one orientation request, which you can use for specific orientation-oriented code for its good practice. We do not need to write a media orientation request at the same time. You can reference my example below. I apologize if my English letter is not very good. Example:

For mobile devices

 @media screen and (max-width:767px) { ..This is basic media query for respective device.In to this media query CSS code cover the both view landscape and portrait view. } @media screen and (min-width:320px) and (max-width:767px) and (orientation:landscape) { ..This orientation media query. In to this orientation media query you can specify more about CSS code for landscape view. } 

For tablet

 @media screen and (max-width:1024px){ ..This is basic media query for respective device.In to this media query CSS code cover the both view landscape and portrait view. } @media screen and (min-width:768px) and (max-width:1024px) and (orientation:landscape){ ..This orientation media query. In to this orientation media query you can specify more about CSS code for landscape view. } 

Desktop

make according to your design needs ... (:

Thanks Jitu

Answer 4

In Javascript, it is better to use screen.width and screen.height . These two values ​​are available in all modern browsers. They give real screen sizes, even if the browser was reduced at application startup. window.innerWidth changes when the browser is reduced, which cannot happen on mobile devices, but can happen on PCs and laptops.

The screen.width and screen.height change when the mobile device flips between portrait and landscape modes, so you can determine the mode by comparing the values. If screen.width greater than 1280px, you are dealing with a PC or laptop.

You can create an event listener in Javascript to detect when two values ​​are inverted. The screen.width portrait values ​​for concentration are 320 pixels (mostly iPhones), 360 pixels (most other phones), 768 pixels (small tablets) and 800 pixels (ordinary tablets).