媒体查询不适用于Android和iPhone

Question

我正在努力使网站在智能手机和平板电脑上保持响应并且看起来很好。

以下是此网站的链接：http://fineart.d.dev.vendo.no/

问题是我的移动设备没有看到我专门为他们编写的媒体查询。 我知道这个问题在Stackoverflow上经常被问到，但我没有找到任何解决这个问题的方法。这是我的代码：

@media only screen and (max-width: 768px) {
    /* Some mobile-specific code goes here */
}

我尝试使用max-device-width并添加了

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

到该部分但没有成功：（

你能帮我解决一下这个问题吗？我真的坚持下去，需要你的帮助。

提前谢谢！

Answer 1

我没有在页面的头部看到视口元标记 - 我错过了什么吗？

Answer 2

我建议使用这个元标记：

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

“maximum-scale = 1”将阻止用户滚动，这通常被视为可访问性问题。让用户根据需要进行缩放。

至于媒体查询，我看了你的CSS，但我实际上没有看到任何媒体查询。您确定加载了这些查询的CSS文件吗？