내 미디어 쿼리가 내 안드로이드 장치에서 작동하지 않습니다

Question

내 미디어 쿼리는 크기를 조정할 때 PC의 브라우저에서 정상적으로 작동하지만 내 안드로이드 장치로 localhost를 통해 내 웹 사이트에 액세스하면 미디어 쿼리가 작동하지 않습니까? 문제는 무엇이 될 수 있습니까? 장치의 해상도는 480 x 800 픽셀입니다.

이

@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%;} 
} 

Answer 1

는 특별히 안드로이드 장치를 대상으로하는 경우, 또는 480x800 어떤 장치가 노력이

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

article 당신이

을 읽고 싶은 경우 꽤 좋은

Answer 2

안드로이드 장치의 폭은 종종 실제 화면 크기되지 않습니다 :

여기 내 미디어 쿼리입니다. 화면 너비를 원한다면 뷰포트 메타 태그가 필요합니다. 당신의 HTML에

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

사용이 메타 태그

업데이트 :

코드 위는 또한 사용자를위한 좋은하지 않습니다 배율 (확대)를 사용하지 않습니다. 그래서 당신은 스케일을 사용하지 않고 작업을 수행 할 수 있습니다

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

Answer 3

많은 Android 기기 화면 너비와 화면 밀도를 둘러싼 유사한 문제가 발생했습니다. 나는이 미디어 쿼리에 정착 결국

:

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

그러나 here 더 많은 장치와 방향 특정 미디어를 제공하는 정답에 대한