CSS媒體查詢不適用於Android設備

Question

在搜索了相關問題之后，我仍然無法使媒體查詢適合我的網站（進行中）：

http://codemusings.net/

我首先確保我的網站驗證為有效的HTML5。 我還使用<meta>標簽和name="viewport" ：

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

使用此處相關問題的幫助，我轉到了http://mediaqueriestest.com/ ，該站點報告我的Samsung 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; }
}