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

Question

我希望我的 @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，一旦它接受其中之一。

Answer 1

max-width是显示区域的宽度（浏览器的宽度）

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

Answer 2

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

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

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

html

css

media-queries

responsive-design