使用@media查詢時，手機是否加載非相關查詢和圖像？

Question

如果我的CSS基於移動樣式，然後使用@media查詢逐漸變大的顯示器（平板電腦，桌面等），移動設備會使用桌面樣式嗎？

我相信，通常，移動設備將加載所有圖像，即使它們不適用於它自己的特定介質尺寸。這意味着它將加載所有圖像並隱藏不符合其基於查詢的樣式表。

我所試圖做的是使用一個後臺的網站的放大版本：

.splash { 
    background: #1a1a1a url('/assets/imageLarge.png') no-repeat; 
} 

，另一個用於手機版：

.splash { 
    background: #1a1a1a url('/assets/imageSmall.png') no-repeat; 
} 

如果我申請之前移動CSS任何媒體查詢，並使用像@media screen and (min-device-width: 481px) {...}這樣的查詢添加下面的大媒體CSS，移動設備也會加載大圖片嗎？

Answer 1

行爲依賴於瀏覽器，但iOS Safari和Android Chrome將尊重媒體查詢並只下載適用媒體查詢的背景圖像。

如果要檢查此行爲，請嘗試使用Mobitest（http://mobitest.akamai.com/）或受限設備加載頁面。

如果你使用單獨的CSS文件（並且我不會敦促你）瀏覽器將下載它們中的每一個，即使它不需要它們，這是CSSOM的限制。一些瀏覽器例如基於WebKit和Blink的樣式表優先化樣式表，因此需要呈現頁面的頁面首先被下載，而其他頁面則在稍後的某個點下載。

需要注意的一件事是顯示：沒有內容圖像，因爲它不會阻止在許多情況下下載。蒂姆·卡德萊茨探討這個更多在這裏：http://timkadlec.com/2012/04/media-query-asset-downloading-results/

Answer 2

這聽起來像它會是很大程度上依賴於瀏覽器，但我想像的任何移動瀏覽器稱職的將試圖通過不加載圖像（也可能不加載整個樣式表），以減少數據使用被標記因爲不適合它。此外，許多移動瀏覽器更喜歡不被識別爲移動瀏覽器。我知道我討厭它，當我彈出在iPad上打開一個網站時，手機樣式表強制我在9.7英寸屏幕上查看單列網站的瘦身條子。他們真的沒有傷害任何東西，只要他們的使用是負責任的），這並不能幫助什麼是一個相當鈍（但仍然是好）的問題;時間去做一些測試！我的目前最喜歡的是FireFox的黑暗和漂亮的網絡檢查器（3D視圖尤其值得一提）但是在移動設備上呢？移動用戶的大部分內容不會放在開發工具附帶的瀏覽器上。

那麼，你有幾個選擇：

• Firebug Lite對移動瀏覽器的一些混合的結果，但 的外觀極好的選擇，在大多數情況下，其他檢查員 不可用。但是，支持HTML5的It does seem to work in iOS和其他移動版 瀏覽器。
• This question建議使用稱爲「weinre」的東西。我從來沒有用過它，但它看起來足夠合理。
• 如果您只需定位幾個瀏覽器就可以了，許多開發人員工具都包含在內。如Google Chrome for Android！

無論您選擇什麼，您都會尋找某種資產瀏覽器;也許是一個時間表視圖。任何類型的工具，可以讓你看到什麼頁面加載，它以何種順序加載它，以及加載需要多長時間。

祝你好運！

Answer 3

蒂姆·卡德萊茨已經把一些真棒研究這個 - Media Query & Asset Downloading Results

您的具體問題在測試＃4回答 - 結果是參差不齊。更好地爲您的圖像進行媒體查詢。