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

Question

After searching through related questions, I'm still unable to get media queries to work for my site (in progress):

http://codemusings.net/

I first ensured that my site validates as valid HTML5. I'm also using the <meta> tag with name="viewport" :

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

Using help from related questions here, I went to http://mediaqueriestest.com/ , which reports my Samsung Galaxy S4 as having a device-width of 640px .

I'm using a separate style sheet in which to overwrite style rules in the main style sheet.

<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)'>

Inside mobile.css :

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

To ensure that the problem wasn't with clients fetching the style sheets in the wrong order, I tried appending a media query to my main CSS style sheet:

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

However, this didn't work either. I've been specifying device-width: 640px in an attempt to just ensure my mobile CSS works right, but my overall goal is to reliably load different CSS for all smart phones and tablets.

I should also note I'm using Chrome on my Galaxy S4.

Answer 1

try with i think this should work

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