Css 我的智能手机无法识别@media查询

我很少做响应性网站，对我来说，媒体查询是全新的。这就是我遇到麻烦的原因

我正在创建一个维护页面，并使用媒体查询使页面响应

我在两台大屏幕智能手机上进行了测试，第一台工作正常，第二台显示完整页面

这是我的页面：

我知道我做错了什么。我是这样使用媒体查询的：

@media only screen and (min-width: 978px) {
//big screens, desktop...
}

@media only screen and (max-width: 977px) {
//tablets...
}

@media only screen and (max-width: 445px) {
//smartphones
}

---

谢谢。

首先，记住使用这个元标记：

第一个选项将帮助您以实际设备宽度呈现页面，因为通常没有此标记，设备将以1024x720的分辨率显示页面，而不是720x480的实际宽度

第二种方法是禁用设备的放大和缩小功能

---

希望对你有帮助

不同的手机，尤其是iPhone，DPI是不同的。请参阅“视口”以了解有关此操作的详细信息：