對移動設備沒有任何影響的CSS媒體查詢

我在構建一個需要高度可擴展/響應的tumblr主題。這幾乎只是中心網格中的帖子。我正在使用CSS媒體查詢來記錄瀏覽器窗口大小，以相應地調整/調整網格中心。他們目前是這樣的：對移動設備沒有任何影響的CSS媒體查詢

<link rel='stylesheet' media='screen and (max-width: 640px)' href='URL.css' /> 
<link rel='stylesheet' media='screen and (min-width: 640px) and (max-width: 959px)' href='URL.css' /> 
<link rel='stylesheet' media='screen and (min-width: 960px) and (max-width: 1279px)' href='URL.css' /> 
<link rel='stylesheet' media='screen and (min-width: 1280px) and (max-width: 1599px)' href='URL.css' /> 
<link rel='stylesheet' media='screen and (min-width: 1600px) and (max-width: 1919px)' href='URL.css' />

第一個，它在640像素寬度馬克塞斯，完美的作品時，我調整一個Firefox/Chrome瀏覽器窗口小，但似乎無法在手機上在所有的工作。我的手機是Droid Razr Maxx，並且它似乎默認爲960像素寬度，即使在「縱向」方向。

我試過有樣式默認爲手機大小的風格，但得到相同的結果，而這也比最優的其他原因（Internet Explorer中一個。）

來源

2012-12-10 Chris

你的手機可能不支持媒體查詢，你可以得到像Respond.js（https://github.com/scottjehl/Respond）這樣的圖書館，使其在不支持 – Andy

的瀏覽器上工作，因爲你的手機已經解析了'540 x 960' –

NullPointer - 540px分辨率不應該被'max-width：640px'覆蓋，還是我誤解了媒體查詢的工作方式？ – Chris

我經常處理的查詢少 - 這個問題有時候在手機瀏覽器中看到的不是設備規格可能會說的像素的確切數量，特別是如果您使用任何類型的頭部變焦。我喜歡做的事情是使用一個非常簡單的jquery警報來檢查視口/文檔的大小，以確定我正在使用的維度。 http://responsejs.com/labs/dimensions/是一個很棒的網站，向您展示捕捉視口寬度和高度的各種方法。

我也喜歡使用「所有和......」，而不是「屏幕和......」

希望這有助於在所有

來源

2012-12-10 16:38:53

有趣的...使用document.documentElement.clientWidth的警報在手機上給我「縱向」980。即使設備規格比這更小。所以媒體查詢需要設備的確切px寬度才能工作。例如，在我上面的評論中，小於640的分辨率不被覆蓋？ – Chris

是的，我自己之前已經得到了一些奇怪的數字，這就是爲什麼我在去堅果之前測試一切，爲什麼他們不適合查詢..我通常也使用「all和（max-device-width）」或「所有和（最小設備寬度）」..這可能會幫助你。試試這些！ –

發現這個傢伙： http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

看起來像「視口」meta標籤是我最好的朋友。修復了我的手機和我的辦公室夥伴的iPhone。

感謝您的建議！

來源

2012-12-10 23:37:42 Chris

把你的HTML頭此meta標籤：

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />

許多現代的智能手機試圖擴展其視其拋出一切都關掉。這個元標記可以防止這種縮放。

來源

2014-07-30 20:46:33

對移動設備沒有任何影響的CSS媒體查詢

回答

相關問題