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設備工作

回答

相關問題