Question

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

我首先确保我的网站验证为有效的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; }
}

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

1 个答案: