max-device-width and orientation change

Question

I have the code below:

@media all 
    and (max-device-width: 360px) {
        div {
            background-color: green;
            }
        }

@media all
    and (min-device-width: 361px)
    and (max-device-width: 640px) {
        div {
            background-color: blue;
            }
        }

But when i change the orientation of my android phone the colors doesn't change. Why does it happens while as i checked the window.innerWidth changes from 640px (landscape) to 360 (portrait)?

Possible duplicate of [How to set portrait and landscape media queries in css?](http://stackoverflow.com/questions/26861189/how-to-set-portrait-and-landscape-media-queries-in-css) — Adam Buchanan Smith, Aug 30 '16 at 21:44

score 2 · Answer 1 · answered Aug 31 '16 at 12:34

Always set the viewport in the head.

<meta name="viewport" content="width=device-width, initial-scale=1">

For more details about viewport meta tag go here.

Here list some basic media query list

/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}
/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {

}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {

}

Go to here for more details about Media Query

I'm using a better one. I find out that these media queries break points match many more devices and desktop screen resolutions.

All media queries responsive menu + media break points

@media only screen and (min-width: 320px) and (max-width: 479px){ ... }

@media only screen and (min-width: 480px) and (max-width: 767px){ ... }

@media only screen and (min-width: 768px) and (max-width: 991px){ ... }

@media only screen and (min-width: 992px) and (max-width: 1999px){ ... }

score 0 · Answer 2 · answered Aug 30 '16 at 21:06

0

You are defining max-device-width twice. Sometimes we don't realize it, it happens.

The correct sintax is:

@media all
    and (min-device-width: 361px)
    and (max-device-width: 640px) {
        div {
            background-color: blue;
            }
        }

answered Aug 30 '16 at 21:06

Yuri Pereira

1,945
17
24

Sorry, i've corrected it out. So Can You now answer my question? – Mulligun81 Aug 30 '16 at 21:10
http://plnkr.co/edit/gonecQYuAYp5YsLfzxPD?p=preview Your solution, probably you forgot the viewport meta. – Yuri Pereira Aug 30 '16 at 21:21

score 0 · Answer 3 · answered Aug 30 '16 at 21:18

Have you set the viewport in the head?

<meta name="viewport" content="width=device-width, initial-scale=1">

You may want to try using max-width and min-width rather than max-device-width and min-device-width, depending on if you are testing in a browser vs. on your phone.

score 0 · Answer 4 · answered Aug 31 '16 at 04:43

This Media Query using only for devices not for browsers. check with devices

/* SAMSUNG NOTE 2 in PORTRAIT */
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width:1920px) and (orientation : portrait) {
 div { 
  background-color: green;
 }
}

/* SAMSUNG NOTE 2 in LANDSCAPE */
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width:1920px) and (orientation : landscape) {
 div { 
  background-color: blue;
 }
}

/*  IPAD in PORTTRAIT */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) {
 div { 
  background-color: green;
 }
}

/*  IPAD in LANDSCAPE */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {
 div { 
  background-color: blue;
 }
 }


/* IPHONE4 LANDSCAPE */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
 div { 
  background-color: green;
 } 
}

/* IPHONE5 PORTRAIT */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
 div { 
  background-color: blue;
 }
}

/* SAMSUNG S4 in PORTRAIT */
@media only screen and (min-device-width : 360px) and (max-device-width : 640px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
 div { 
  background-color: green;
 }
}

/* SAMSUNG S4 in LANDSCAPE */
@media only screen and (min-device-width : 360px) and (max-device-width :640px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
 div { 
  background-color: blue;
 }
}

max-device-width and orientation change

4 Answers4