媒体查询未被移动设备读取

Question

所以我有一个我正在处理的响应式网站，当我在计算机上查看它时显示正常。当我在Chrome，IE，Safari等中调整浏览器大小时，该网站会响应我在css文档中声明的媒体查询。但是，当我在iPhone，iPad或任何其他移动设备上查看该网站时，未检测到媒体查询，并且它显示桌面断点的缩小版本。此外，我还有一个Chrome扩展程序，用于检测网站中的媒体查询，并且表示我的网站上没有检测到媒体查询。

我确实

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

头文件中的

和我的css中的媒体查询看起来像这样。

@media  screen and (max-width : 620px) {
ul.mainmenu {display:none;} 
footer {height:140px;}
}

移动设备似乎只响应“max-device-witdth”但不响应“max-width”而对于我来说只需用“max-device-width”复制媒体查询就可以了，其余的元素媒体查询中未指定的内容仍显示为缩小的桌面视图。有什么想法吗？

Answer 1

不是我的问题的答案，但我弄清楚发生了什么。该站点在GoDaddy上托管，具有虚拟域名。所以我一直在vanityname.domain.com上访问它。当我在手机或桌面上访问该网站时，由于某种原因HTML5文档正在加载为HTML 4文档。但是，如果我访问www.domain.com/vanityname，该网站将显示为HTML5文档。不确定背后的所有推理，但会让我节省数小时的挫折......