方向改变和screen.width

Question

我注意到更改设备方向（Android 手机）会导致 screen.width 发生更改。例如，在我的华为安卓手机上，在纵向位置screen.width == 360 像素，而在横向 640 像素。考虑到（至少据我所知）screen.width 拥有device-width 属性值，为什么下面的代码：

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

不工作？

如果device-width 与screen.width 链接，它的值不应该像screen.width 那样随着实际设备方向而改变吗？

Answer 1

device-width 是指设备本身的宽度，换句话说， 设备的屏幕分辨率

你想要这样的东西吗？

/* Portrait */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {
  div {
    background-color: green;
  }
}

/* Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
  div {
    background-color: blue;
  }
}