css - 媒体查询在智能手机中不起作用

Question

我有奇怪的问题。我完成了一个网站，并正在使用 quirktools 的 screenfly 来查看它在平板电脑和智能手机上的显示方式......看起来不错

当我在智能手机或平板电脑上实际查看该网站时，它以桌面版本显示该网站......媒体查询不起作用......我在手机上尝试了 chrome、firefox、opera，但没有一个显示我的移动版网站。

朋友你能告诉我什么可能是错的吗？

我在我的 css 文件中使用简单的媒体查询

score 5 · Accepted Answer

您是否为视口设置了元标记？就像是：

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

score 1 · Accepted Answer

将此元标记放在两者之间

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

score 1 · Accepted Answer

您还可以试用此元标记，这将使您的媒体查询适用于所有尺寸的设备

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

谢谢

3 回答 3