CSS媒体查询不是Android设备工作

通过相关问题的搜索后，我仍然无法得到媒体查询到我的网站（在建）工作：CSS媒体查询不是Android设备工作

我首先保证我网站验证为有效的HTML5。我还使用了<meta>标签与name="viewport"：

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

运用相关问题帮助在这里，我去http://mediaqueriestest.com/，它报告我的三星Galaxy S4为具有640px一个device-width。

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

<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。

来源

2014-09-28 Curtis

尝试我认为这应该工作

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

来源

2014-09-28 09:31:37

这并获得成功。我不得不进一步修改我的手机CSS，因为我没有意识到我的主CSS样式表中存在“最小宽度”。 – Curtis 2014-09-29 02:42:26

CSS媒体查询不是Android设备工作

回答

相关问题