智能手机接受（最大设备宽度：x），但不接受（最大宽度：x）

Question

我希望我的@media适用于智能手机以及小型浏览器窗口。

因此，我想在下面的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> 

对于手机来说，应该没有什么区别，因为浏览器通常会填满整个屏幕。

为什么我的电话只接受第一个@media ？

编辑：由于问题似乎是模棱两可的：我知道其中的区别，但是我不明白为什么智能手机一旦接受@media便不接受它们。

Answer 1

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

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

Answer 2

在我的HTML中使用<meta name="viewport" content="initial-scale=1">标签，它可以工作，但我不知道为什么。