@media不适用于所有设备

Question

我最近部署了一个网站infortion.com。一切似乎工作正常，接受一些用户报告网站在他们的移动设备上无法正常查看！此外，他们还向我发送了截图，清楚地显示@media标签无法在手机上使用。

我试过在我的手机上打开它（金立P5W - android 6）＆amp;它工作正常，但不适合他们。

这是元标记，

<meta name="viewport" content="width=device-width, initial-scale=1">

这是小型设备的CSS文件结构，

@media all and (min-width:321px) and (max-width:480px){
# CSS
} 

@media all and (min-width:0px) and (max-width:320px){
 # CSS
}

我们如何解决这个问题？谢谢 。 。

Answer 1

尝试使用您的媒体查询：

@media screen (max-width: 320px){
 # CSS
}

它会定位max-width 320px的任何屏幕（和任何设备）。由于设置了max-width，这意味着320px下的任何其他内容也都是定位的，因此添加min-width将是多余的。

元标记是正确的，不应导致任何问题。

让我知道这是如何工作的，如果仍有问题，请提供一些屏幕截图。