媒體查詢邏輯

作爲一個非常簡單的方法，以「響應式設計」，我有兩個版本的CSS的網站我的工作：媒體查詢邏輯

常規（非移動）版本應該顯示在屏幕寬度超過700px的任何設備 ;
簡化的移動版本，將顯示在屏幕寬度等於或小於700像素的任何設備上。

我用@media only screen and (max-device-width : 700px)查詢來分離兩套CSS規則。

我也用這個JavaScript代碼段基於所述屏幕的寬度分配視口元標記參數：

<script type="text/javascript"> 

var width = screen.width; 
var height = screen.height; 
var meta = document.createElement("meta"); 
var head = document.getElementsByTagName("head")[0]; 

if (width >= 700) { 
    meta.setAttribute("name", "viewport"); 
    meta.setAttribute("content", "width=1000"); 
    head.appendChild(meta); 
} else if (width <700) { 
    meta.setAttribute("name", "viewport"); 
    meta.setAttribute("content", "width=device-width; initial-scale=1; maximum-scale=1"); 
    head.appendChild(meta); 
}; 

</script>

的腳本將視口向1000像素的寬度，如果該裝置具有屏幕寬度> = 700px，從本質上確保網站的非移動版本的整個寬度適合屏幕內容，並且如果屏幕寬度小於700px，則將初始縮放設置爲1。

再說一次，我想要完成的是：當屏幕寬度> 700px時，顯示常規（非移動）網站;當屏幕寬度爲< = 700px時，顯示精簡（移動）網站。

結果讓我大吃一驚：

三星Galaxy S（480×800） - 非移動版，景觀和縱向位置
三星Galaxy S II（480×800） - 非移動版，景觀肖像定位
摩托羅拉Droid RAZR（540x960） - 非移動版本，風景和人像位置
摩托羅拉Droid 4（540x960） - 非移動版，景觀和
肖像持倉
摩托羅拉光子4G（540x960） - 非移動版，景觀和縱向位置
摩托羅拉Atrix HD（720x1280） - （！）手機版，橫向和縱向位置（即使兩者的屏幕尺寸寬度比將滿足移動查詢）
摩托羅拉RAZR（540x960） - 手機版，橫向和縱向位置（即使它的景觀位置的寬度大於700像素）
HTC野火（240×320） - 非手機版（！），風景和肖像寶（儘管它具有最小尺寸的屏幕，兩種尺寸都小於700像素！）
索尼的Xperia X10（480X854） - 移動版，縱向和橫向位置（即使它的景觀位置的寬度大於700像素）
LG的Optimus 3D（480×800） - 非移動版本，肖像和
景觀位置
亞馬遜Kindle Fire 2（600x1024） - 移動版，縱向和景觀位置（儘管其較寬的尺寸是遠高於 700像素）

從我所看到的，我的結論是移動設備是一個一塌糊塗。大多數設備似乎都將最高維度視爲最大寬度，但有些（亞馬遜Kindle 2）似乎將較低維度視爲「寬度」，並將其視爲「高度」。有些設備的屏幕尺寸低於700像素，但「假裝」擁有更高的屏幕尺寸。

看來，我用錯誤的邏輯，當我試圖用700 max-device-width作爲決定性因素的媒體查詢。

問題：創建一個媒體查詢將涵蓋儘可能多的設備儘可能與以下規則：「如果屏幕的當前寬度是< = 700像素，適用於移動CSS」 - 應該是什麼正確的附加條件？

來源

2013-05-17 Dimitri Vorontzov

你包括viewport meta標籤？

https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

看到你的viewport腳本後，我不知道這是否是引起問題

var width = screen.width; 

if (width >= 700) { 
    meta.setAttribute("name", "viewport"); 
    meta.setAttribute("content", "width=1000"); 
    head.appendChild(meta); 
}

慣於在width變量，因爲它查詢屏幕寬度的時間設置爲超過700個，該設備將默認縮放頁面？

來源

2013-05-17 13:49:03

謝謝@Duncan。是的，當然，我確實使用了視口元標記，實際上，我實際上添加了一些JavaScript片段來控制添加到視口元標記的參數，具體取決於屏幕寬度。我在這個問題上加了這個。 –

我假設你正在以正確的順序添加2個樣式表？如果您的移動樣式是先添加的，則可能會被「標準」樣式覆蓋。看[基本樣式後的媒體查詢（http://jsfiddle.net/duncan/AEt5S/1/）相比[之前基本樣式媒體查詢（http://jsfiddle.net/duncan/AEt5S/2/） –

有趣的思想，@鄧肯。讓我測試一下。（該風格以正確的順序，當然，普通的CSS第一 –

鄧肯提到，添加viewport標籤。

理想的情況下將其設置爲一樣的東西：

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

然後調整你的媒體查詢使用max-width而非max-device-width。

我很想看到進行這些更改後，您的測試結果。

來源

2013-05-17 13:51:50

是的，@Ian，我已經處理了視口元，儘管不是非常標準的方式。請看看編輯過的問題。 –

更新：將max-device-width更改爲max-width對任何設備都沒有任何影響@Ian。 –

媒體查詢邏輯

回答

相關問題