媒體查詢不適用於手機

Question

我已經爲移動設備創建了樣式表。與此IM加載它：

<link rel="stylesheet" media="handheld, screen and (max-width: 650px)" href="/mobile.css?t=<?php echo rand(); ?>" /> 

那個文件我裏面：

@media handheld, screen and (max-width: 650px) { 
    -- Styles here 
} 

@media handheld, screen and (max-width: 446px) { 
    -- Styles here 
} 

它的工作原理，當我調整瀏覽器，但由於某些原因，至少在Android上我看到正常的網頁，任何想法？

Answer 1

有許多的原因，這可能會發生：

1. 您的Android不支持媒體查詢。有一些Android設備無法識別媒體查詢，您的機器人可能就是其中之一。

2. 您的媒體查詢沒有被解釋，您認爲它是如何被解釋的。您是否在尋找「掌上電腦，（屏幕和最大寬度：650px）」，還是必須是最大寬度爲650px的手持屏幕？如果你期待第一個，你可能會得到後者。如果是這樣的話，那麼你可能永遠不會觸發該代碼，因爲很少有智能手機將自己註冊爲「手持設備」。

3. 你的屏幕寬度不是你認爲的那樣。僅僅因爲你有一個1.5英寸×3英寸的屏幕，這並不意味着你的分辨率達到了650px甚至446px。由於這些智能手機可以達到的高密度，您的機器人實際上可能比您的臺式機顯示器具有更高的分辨率。例如，iPhone5只會讀取您的第一個查詢，並且只能在肖像模式下閱讀，因爲它的最小邊是640px，長邊是1136px。 Android OS支持的最高分辨率是2560x1600！）