三星Galaxy S3的媒體查詢

我有一個投資組合網站，我試圖做出迴應，我希望能夠向我的S3上的人展示它，儘管我遇到了一些麻煩它使用媒體查詢工作。我使用了診斷工具in this post，並在手機上安裝的兩個瀏覽器（三星的默認瀏覽器和Chrome）上獲得了兩個不同的設備寬度值，所以我剛剛使用「寬度」與設備像素比率相結合。三星Galaxy S3的媒體查詢

這是我在我的樣式表：

body, html 
{ 
    display: block; 
    font-family: quicksand, arial; 
    background-color: #EFEFEF; 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

#container 
{ 
    background-color: red; 
    width: 50%; 
    height: 50%; 
} 

@media only screen and (max-width: 22em) and (-webkit-device-pixel-ratio: 2) 
{ 
    #container 
    { 
     width: 100%; 
     height: 100%; 
     background-color: yellow; 
    } 
}

出於某種原因，背景顏色仍爲紅色，甚至當我查看了S3的頁面。我錯過了什麼嗎？

來源

2013-10-09 David Pearse

你使用任何特別的原因'em'，而不是'px'？ –

不是，當我有（最大寬度：360px）時，它似乎沒有工作雖然... –

你可以嘗試'-webkit-min-device-pixel-ratio：1.5'並看看它是否工作？ –

在我的三星S3搭載Android 4.1.2，而我嘗試了所有的媒體查詢功能（最大高度，寬度，設備高度和寬度以及顏色：8）只有這個工作對我來說：

/* Samsung S3 default browser portrait*/ 
@media only screen and (device-width: 720px) and (device-height: 1280px) and (orientation: portrait) { 
body { background:yellow;} 
} 

/* Samsung S3 default browser landscape */ 
@media only screen and (device-width: 1280px) and (device-height: 720px) and (orientation: landscape) { 
body { background:#000;} 
}

Here is a screenshot爲pieroxy媒體查詢診斷工具測試所有可能的查詢。

請注意這兩個工作都沒有方向，但沒有負載/刷新不改變適當性。

希望這有助於與其他任何疑問沒有衝突可能使用

來源

2014-01-07 03:34:03 hsobhy

三星Galaxy S3的媒體查詢

回答

相關問題