android @media查詢寬度問題

我在@media查詢上閱讀了一篇很好的文章，現在我正嘗試使用它們根據瀏覽器寬度來格式化我的網站。當我在我的Android手機（Android 4.0瀏覽器）上測試時，當實際寬度爲480時，它似乎會給出800像素的寬度。如果手機旋轉爲橫向，800將是寬度。什麼是正確的方式來檢測CSS中的當前寬度？android @media查詢寬度問題

The CSS I used for testing: 

@media all and (max-width: 800px) { 
    div.testit800 { 
    display: block; 
    } 
} 

@media all and (max-width: 799px) { 
    div.testit799 { 
    display: block; 
    } 
} 

@media all and (max-width: 768px) { 
    div.testit768 { 
    display: block; 
    } 
}

的HTML：

<div class="testit800"> 
    max width 800 
</div> 
<div class="testit799"> 
    max width 799 
</div> 
<div class="testit768"> 
    max width 768 
</div>

Android的總是顯示：無論取向最大寬度800。

更新：我發現this page，演示了幾種javascript檢測寬度的方法。 window.outerWidth似乎適用於Android。它在設備和瀏覽器中通常是可靠的嗎？我意識到我將不得不放棄@media查詢來使用它。

來源

2013-08-19 George

[CSS3媒體查詢不工作]的可能重複（http://stackoverflow.com/questions/7859336/css3-media-queries-not-working） – cimmanon

我讀過那個，並使用建議的，但這並不會改變我的結果。 – George

我想你是正確的做法，但是正如你的代碼所顯示的，你沒有任何寬度爲480px的@media。

@media all and (min-width: 480px) and (max-width: 599px) 
{ 
}

此代碼將從480（最小）到599（最大）的像素範圍內。應該管用。

我的建議是始終使用百分比而不是px，因爲百分比將固定在屏幕大小上並且像素是固定的。

來源

2013-08-19 19:16:17

android @media查詢寬度問題

回答

相關問題