How to detect the device orientation using CSS media queries

Question

In JavaScript the orientation mode can be detected using   if  window innerHeight  gt  window innerWidth        portrait   true    else       portrait   false      However  is there a way to detect the orientation using CSS only   Eg  something like    media only screen and  width  gt  height

User · Answer

In Javascript it is better to use screen width and screen height  These two values are available in all modern browsers  They give the real dimensions of the screen  even if the browser has been scaled down when the app fires up  window innerWidth changes when the browser is scaled down  which can t happen on mobile devices but can happen on PCs and laptops   The values of screen width and screen height change when the mobile device flips between portrait and landscape modes  so it is possible to determine the mode by comparing the values  If screen width is greater than 1280px you re dealing with a PC or laptop   You can construct an event listener in Javascript to detect when the two values are flipped  The portrait screen width values to concentrate on are 320px  mainly iPhones   360px  most other phones   768px  small tablets  and 800px  regular tablets

User · Answer

CSS to detect screen orientation     media screen and  orientation portrait            media screen and  orientation landscape            The CSS definition of a media query is at http   www w3 org TR css3-mediaqueries  orientation

User · Answer

I think we need to write  more specific media query  Make sure if you write one media query it should be not effect to other view  Mob Tab Desk  otherwise it can be trouble  I would like suggest  to write one basic media query  for respective device which cover both view and  one orientation media query that you can specific code more about orientation view  its for  good practice  we Don t need to write both media orientation query at same time  You can refer My below example  I am sorry if my English writing is not much good   Ex   For Mobile   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 as per your design requirement enjoy       Thanks  Jitu

User · Answer

I would go for aspect-ratio  it offers way more possibilities      Exact aspect ratio     media  aspect-ratio  2 1                  Minimum aspect ratio     media  min-aspect-ratio  16 9                  Maximum aspect ratio     media  max-aspect-ratio  8 5                Both  orientation and aspect-ratio depend on the actual size of the viewport and have nothing todo with the device orientation itself   Read more  https   dev to ananyaneogi useful-css-media-query-features-o7f

User · Answer

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 you have to experiment

[browser] How to detect the device orientation using CSS media queries?

Examples related to browser

Examples related to css

Examples related to tablet

Examples related to media-queries