我的媒體查詢不適用於我的Android設備

當我重新調整大小時，我的媒體查詢可以正常工作，但是當我通過本地主機訪問我的網站時，我的媒體查詢不起作用？問題是什麼？我的設備具有480 x 800像素分辨率。我的媒體查詢不適用於我的Android設備

這裏是我的媒體查詢：

@media (max-width: 480px) { 
#main{width:90%;position:relative;} 
div.itemRelated ul li {float: left;width: 20%;} 
div.itemRelated ul li a img{width:90%;} 
div.itemRelated ul li a{text-align:center;} 
.maincontent{width:90%;font-size:.7em;} 
#base{width:100%;} 
h2, h2 a:link, h2 a:visited{font-size:.7em;} 
#container_header{width:96%;} 
#container_slideshow{display:none;} 
#container_main{width:90%;margin: 0 auto;} 
.wrapper960{margin:0 auto;}/*ova treba da se cepne*/ 
#sidecol_b, #sidecol_a{display:none;} 
#content_remainder{width:96%;clear:both;top:0;} 
#container_bottom_modules{display:none;} 
#container_spacer3{display:none;} 
#jazik{float:left;} 
.sigProContainer sigProClassic sigProClassic{margin-left:10%;} 
#hornav{padding-left:5px;} 
#hornav ul li a{font-size:1em;padding: 0 5px;width:8%} 
#container_header{width:100%;} 
#socialmedia{display:none;} 
#search {clear:both;top: 20%;left: 15%;} 
.content{width:66%;} 
}

來源

2012-11-25 Darko

如果你是專門針對Android設備，或與480x800任何設備試試這個

@media only screen and (min-device-width: 480px) { 
    /* Style goes here */ 
}

一個非常不錯的article如果你喜歡閱讀

來源

2012-11-25 20:00:56

Android設備的寬度往往是不實際的屏幕尺寸。如果你想擁有屏幕的寬度，你需要一個視口元標記。

<meta id="viewport" name="viewport" content ="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

使用這個元標記在HTML

更新：

上面的代碼也將禁用縮放（變焦），這對於用戶的不錯。所以，你可以不用禁用擴展到：

<meta id="viewport" name="viewport" content ="width=device-width" />

來源

2012-11-25 20:00:49

+1爲正確答案。但是，防止用戶縮放可能不合意。 ''就足夠了。 – primo

@primo你是對的！禁用縮放並不是最好的用法。 –

我遇到過類似的問題，圍繞着衆多的Android設備屏幕寬度和屏幕密度。

在我這個媒體查詢結算結束：

@media only screen and (max-width: 765px) { 
    /* Style goes here */ 
}

但here是一個方便的網站，提供更多的設備和定向特定媒體的查詢

來源

2012-11-25 20:11:26

我的媒體查詢不適用於我的Android設備

回答

相關問題