智能手機接受（最大設備寬度：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">標簽，它可以工作，但我不知道為什么。