移动设备无法读取媒体查询

Question

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

我有

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

在head标签中，我在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文档。 完全不知道其背后的原因，但可以节省我数小时的沮丧...