css - 方向变化和 screen.width

Question

我注意到改变设备方向(安卓手机)会导致 screen.width 改变。例如在我的华为 android 手机上，当处于纵向位置时 screen.width == 360px，而在横向位置时为 640px。考虑到(至少据我所知)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 refers to the width of the device itself, in other words, the screen resolution of the device

你想要这样的东西吗？

/* 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;
  }
}