智能手机接受 (max-device-width: x) 但不接受 (max-width: x)

smartphone accepts (max-device-width: x) but not (max-width: x)

我希望我的 @media 适用于智能 phone 以及小型浏览器 windows。

因此我想在下面的 CSS 片段中使用第二个 @media

@media only screen and (max-device-width: 37em) {
  .max-device-width {
    background: lightgreen;
  }
}

@media only screen and (max-width: 37em) {
  .max-width {
    background: lightgreen;
  }
}
<div class="max-device-width">max-device-width</div>
<div class="max-width">max-width</div>

对于 phones 应该没有区别,因为浏览器通常会填满整个屏幕。

为什么我的phone只接受第一个@media

编辑: 由于问题似乎模棱两可: 我知道其中的区别,但我不明白为什么智能 phone 不接受两者 @media,一旦它接受其中之一。

max-width是显示区域的宽度(浏览器的宽度)

max-device-width是实际屏幕的最大宽度

随着 <meta name="viewport" content="initial-scale=1"> 我的 html 中的标签有效,但我不知道为什么..