4

当我重新调整大小时，我的媒体查询在 pc 浏览器中工作正常，但是当我使用我的 android 设备通过 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%;}
}
4

3 回答 3

12

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-25T20:00:49.350 回答
6

如果您专门针对 android 设备或任何设备，请480x800尝试此操作

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

一篇不错的文章，如果你喜欢阅读

于 2012-11-25T20:00:56.480 回答
3

我遇到了围绕众多 Android 设备屏幕宽度和屏幕密度的类似问题。

最后我确定了这个媒体查询：

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

但这里有一个方便的网站，提供更多设备和方向特定的媒体查询

于 2012-11-25T20:11:26.330 回答