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

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文档被加载为HTML4文档。但是，如果我访问www.domain.com/vanityname，该站点将显示为一个HTML5文档。我完全不确定这背后的原因，但这会让我省下几个小时的挫败感……