媒体查询无法在智能手机上运行

Question

对于以下屏幕尺寸，我有四种不同的CSS样式：

(1) @media only screen and (max-width: 566px) { 
(2) @media only screen and (min-width: 567px) and (max-width: 767px) {
(3) @media only screen and (min-width: 768px) and (max-width: 999px) {
(4) @media only screen and (min-width: 1000px) {

当我在桌面PC上调整浏览器窗口大小时，一切都按预期工作。然而，在智能手机上（在摩托罗拉Moto X 2，三星Galaxy Mini S4，iPhone 4s上测试），总是触发媒体查询（3）（在纵向和横向视图中）而不是（1），尽管有以下{{3}我的摩托罗拉Moto X 2：

parameters

仅当我将（1）更改为

时

(1) @media only screen and (max-width: 980px) {

（1）被触发。但是这也包括（2）和（3），所以例如在iPad上，（1）将触发而不是（3）。有什么想法吗？

谢谢！

修改

在Android App“barcoo”的内部浏览器中，媒体查询按预期工作，但不是例如在移动Chrome或移动Firefox中......

Answer 1

感谢CodeRomeos'hint，我可以解决这个问题：

而不是

@media only screen and (max-width: 566px) {...}

我用过：

@media only screen and (max-device-width: 566px) {...}

希望这也有助于你！