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

Question

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

我正在制作维护页面，并且我正在使用媒体查询来使页面响应。

我在两款配备大屏幕的智能手机上进行了测试，第一部完美运行，第二部则显示整页。

这就是我的页面：http://www.geocities.ws/tctheme/

我知道我做错了什么。我以这种方式使用媒体查询：

@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
}

谢谢。

Answer 1

首先，请记住使用此元标记：
    <meta name="viewport" content="width=device-width" />
    <meta name="viewport" content="user-scalable=no" />

第一个，将通过在真实设备宽度上呈现页面来帮助您，因为通常没有此标记，设备将显示具有分辨率的页面，如1024x720，而不是真实宽度，可能是720x480。

第二种方法是禁用放大和缩小设备。

希望对你有所帮助！