媒體查詢不工作的智能手機

我有以下的屏幕尺寸四組不同的CSS樣式：媒體查詢不工作的智能手機

(1) @media only screen and (max-width: 566px) { 
(2) @media only screen and (min-width: 567px) and (max-width: 767px) { 
(3) @media only screen and (min-width: 768px) and (max-width: 999px) { 
(4) @media only screen and (min-width: 1000px) {

當我調整我的桌面PC上的瀏覽器窗口，一切正常。然而，在智能手機上（經過摩托羅拉Moto X 2，三星Galaxy Mini S4，iPhone 4s測試），儘管以下我的摩托羅拉parameters被觸發（縱向和橫向視圖），但始終是媒體查詢（3）而不是（1）極限摩托2：

只有當我改變（1）

(1) @media only screen and (max-width: 980px) {

（1）被觸發。但是這也將覆蓋（2）和（3），例如，在iPad上，（1）會觸發而不是（3）。請有任何想法嗎？

謝謝！

編輯：

在查詢按預期工作媒體的Android應用程序「寶石鱸」內部瀏覽器，而不是如在移動瀏覽器或移動設備Firefox ...

來源

2015-09-06 bromelio

嘗試僅僅刪除和使用@media屏幕（最大寬度：320像素）/ *對於像小屏幕移動*/ { }對於像手機 – CodeRomeos

@CodeRomeos由於屏幕小，但遺憾的是沒有工作，要麼。而對於我的360px智能手機，320px將會太小（請參閱表格）。 – bromelio

這可能會幫助你。 https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ – CodeRomeos

由於CodeRomeos' hint，我可以解決這個問題，像這樣：

我代替

@media only screen and (max-width: 566px) {...}

：

@media only screen and (max-device-width: 566px) {...}

希望這也能幫助你！

來源

2015-09-06 18:25:26 bromelio

@broelio太棒了！ :) – CodeRomeos

媒體查詢不工作的智能手機

回答

相關問題