手機響應奇怪

-1

所以我設置了一個非常簡單的東西：一個網頁有兩個容器和一個註冊表單。除了背景圖像集和用CSS配置外，容器是空的。我試圖讓這個網頁根據媒體查詢的屏幕大小做出不同的響應，對於我的桌面，它工作正常;當我調整頁面大小（例如）低於720px時，容器中的背景圖像會相應地進行調整並進行可預測的調整。以下是問題開始的地方：它不會在我的移動設備上響應。手機響應奇怪

我使用Galaxy S3作爲我的出發點。它的分辨率是720x1280px。但似乎媒體查詢對移動瀏覽器沒有影響。

下面是它如何出現在臺式機和筆記本電腦：

#header { 
    width:100%; 
    height:100%; 
    background-color:#000000; 
    background:url(".../header.jpg") no-repeat fixed; 
    background-size:contain; 
    background-position:center; 
}

這裏的媒體查詢配置的三星Galaxy S3：

@media only screen and (max-height: 720px) and (-webkit-device-pixel-ratio: 2) { 

#header { 
    width:100%; 
    height:100%; 
    background-color:#000000; 
    background:url(".../header.jpg") no-repeat fixed; 
    background-size:500px auto; 
} 

}

我已經添加視標籤我<head>，但我我仍然沒有從我的編碼中得到理想的迴應。難道我做錯了什麼？我應該嘗試將其他設備作爲基準嗎？

來源

2014-12-23 Matthew

最大高度將與1280像素相關，而不是720像素。至少在Chrome中，Galaxy S3的默認方向將是肖像。設置最大寬度：720px。

我從來沒有使用關鍵字「only」，因爲當媒體查詢更新時，我無法讓它恢復工作。嘗試這樣的查詢：

@media screen and (max-width: 720px) and (-webkit-device-pixel-ratio: 2) { 

}

還是保持簡單，做：

@media screen and (max-width: 720px){ 

}

BTW，最好的做法不經常使用最大寬度。你想開始造型你最小的屏幕，並使用最小寬度移動到更大的屏幕。

由於Galaxy報告的屏幕寬度小得多，所以可能由於像素密度而異。它說360px在這裏：http://www.mydevice.io

來源

2014-12-23 20:34:21 tsookram

謝謝，但這被證明是不成功的。 – Matthew

設置一個明顯的規則，例如{background-color：red;}以確認規則集正在工作。 – tsookram

手機響應奇怪

回答

相關問題