Orientation change and screen.width

[MulliGan81]

I noticed that changing device orientation (android phone) causes screen.width to change. For example on my Huawei android phone when in the portrait position screen.width == 360px while in landscape 640px. Taking into account that (at least as far as i know) screen.width holds device-width property value why the code below:

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

Doesn't work?

If device-width is linked with screen.width shouldn't it's value change accordingly with the actual device orientation just like screen.width does?

 

[Cogman]

max-device-width is the max width of the device in any orientation. It is not the current width of the device. For that you want min-width and max-width.

 

[MulliGan81]

max-device-width is the max width of the device in any orientation. It is not the current width of the device. For that you want min-width and max-width.

Ok, i thought alike, but if the screen.width holds vale of device-width and do change along orientation change (what I've checked) and why device-width itself doesn't?

 

[Cogman]

They are two different systems and two different things, unfortunately. There isn't a much better answer then that. In web dev you can't expect consistency.