響應式設計混亂

Question

當我認爲自己對媒體查詢和響應式設計有所瞭解和組織時，我已經開始在某些設備中看到一些奇怪的行爲，從而導致混亂。

我的意圖是有一組媒體查詢，我可以使用這些查詢來覆蓋所有不同的設備/分辨率。我已經看過一些帶有例子的文章，並開始將它們付諸實踐，但是在三星Galaxy SII移動設備上測試時，它們看起來並不像預期的那樣工作。

開始寬度聲稱SII的分辨率爲480x800。我不知道這個分辨率是否僅適用於視頻播放，但是當我準備好我的設計時，它們似乎適合320px的寬度。

我使用JavaScript screen.width和screen.height性能檢查什麼解決它正在與這裏是我的結果：

• 在本地瀏覽器我得到加載頁面時，320x450分辨率縱向。然而，在同樣的瀏覽器中，如果我以橫向方向重新加載頁面，我會獲得533x235尺寸。就在這裏，它是古怪的，因爲我希望有相同的高度和寬度，無論使用的方向如何。此外，它們都不符合聲稱的480x800設備分辨率。

• 如果我使用Firefox瀏覽器，我會爲橫向和縱向取向獲得480x800寬度的屏幕屬性，但如果我嘗試適合寬度爲480像素的圖像，則不會，因爲它似乎只有320px的寬度。

實際上，在所有這些情況下，實際分辨率似乎是320x533。

任何人都有這種奇怪的行爲的解釋？

任何建議，以接近它，並獲得媒體查詢的設置，以涵蓋所有的解決方案？

編輯::::::::::::::

我試圖與視口：

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

，仍然沒有成功。實際上根據hexblot給出的鏈接中的文章「maximum-scale = 1」不應該縮放，但它確實在我的設備中（它可能只是針對iOS，不知道）。我有以下的CSS鏈接：

<link rel='stylesheet' type='text/css' media='only screen and (max-width : 320px)' href='".home_url()."/wp-content/themes/twentyeleven/style-xsmall.css'> 
<link rel='stylesheet' type='text/css' media='only screen and (min-width : 321px) and (max-width : 479px)' href='".home_url()."/wp-content/themes/twentyeleven/style-small.css'> 
<link rel='stylesheet' type='text/css' media='only screen and (min-width : 481px) and (max-width : 767px)' href='".home_url()."/wp-content/themes/twentyeleven/style-medium.css'> 
<link rel='stylesheet' type='text/css' media='only screen and (min-width : 768px) and (max-width : 959px)' href='".home_url()."/wp-content/themes/twentyeleven/style-large.css'> 
<link rel='stylesheet' type='text/css' media='only screen and (min-width : 960px)' href='".home_url()."/wp-content/themes/twentyeleven/style-xlarge.css'> 

當我的設備訪問該網站，我可以檢查它使用樣式xsmall.css（最多320像素的寬度）。

說實話，它看起來像它的真正的寬度320像素（至少用於網頁瀏覽）縱向和533像素（奇怪的大小）時，在橫向。

任何線索？

Answer 1

您是否通過相關元標記設置了視口？否則屏幕可能會在大多數移動設備中自動縮放。結帳http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

Answer 2

顯然這是因爲像素密度，在這個設備是1.5（480變成320和800變成533）。一些使用像素密度= 2的iOS設備似乎也會發生這種情況，它將實際密度除以2。

我已從此鏈接獲得此信息：http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml。希望它對別人有幫助。

因此，當使用javascript屏幕屬性時，firefox會檢索設備寬度/高度，而原生android瀏覽器會獲取「轉換後」大小。

我還是不明白爲什麼在原生瀏覽器中，不同的分辨率會顯示在設備方向上。

最後，做一些快速測試（不幸的是，我沒有足夠的時間來得出深刻的結論），似乎最大設備寬度和最大寬度與變換大小（320x533）一起工作。

儘管如此，如果其他人可以提供一些有關如何處理所有這些功能的相關信息，那麼考慮到這一切有點混亂（至少對我而言）。