CSS 媒体查询不适用于 Android 设备

Question

搜索相关问题后，我仍然无法让媒体查询适用于我的网站（正在进行中）：

http://codemusings.net/

我首先确保我的网站验证为有效的 HTML5。我也在使用<meta> 标签和name="viewport"：

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

使用此处相关问题的帮助，我访问了http://mediaqueriestest.com/，它报告我的三星 Galaxy S4 有一个 device-width 和 640px。

我正在使用一个单独的样式表来覆盖主样式表中的样式规则。

<link rel='stylesheet' type='text/css' href='style/main.css'>
<link rel='stylesheet' type='text/css' href='style/mobile.css' media='only screen and (device-width: 640px)'>

内部mobile.css：

nav {
  float: none;
  width: 50%;
}
main {
  float: none;
  width: 90%;
}
.section {
  background: none;
}

为了确保问题不在于客户端以错误的顺序获取样式表，我尝试将媒体查询附加到我的主 CSS 样式表：

@media screen only and (device-width: 640px) {
  html { color: red; }
}

但是，这也不起作用。我一直在指定 device-width: 640px 以确保我的移动 CSS 正常工作，但我的总体目标是为所有智能手机和平板电脑可靠地加载不同的 CSS。

我还要注意我在 Galaxy S4 上使用 Chrome。

Answer 1

尝试一下，我认为这应该可行

@media only screen and (max-device-width: 640px) {
  html { color: red; }
}