Question

我为自己的网站开发了一个自适应主题，在我的css文件上使用媒体查询。

它适用于ipad / iphone和小型Android手机。当我到达Galaxy S2时，它似乎忽略了我的媒体查询。

这是我用来定位galaxy s2等媒体查询 - 它是否正确？如果是这样，为什么它不起作用？

@media only screen and (min-device-width : 480px) and (max-device-width : 800px)

感谢

Answer 1

您的代码应该有效。

您是否尝试添加'orientation'，如：

@media only screen 
and (min-device-width : 480px) 
and (max-device-width : 800px) 
and (orientation : landscape) {

}

@media only screen 
and (min-device-width : 480px) 
and (max-device-width : 800px) 
and (orientation : portrait) {

}

Answer 2

显示的答案是错误的！三星设备在纵向和横向模式下的分辨率与Apple设备不同。另外，为什么使用“min-device-width”和“max-device-width”？坚持手头的决议！你不希望你的设计在错误的分辨率下不恰当地显示！这样做，我保证它有效，因为我一直使用它：

@media screen和（device-width：480px）和（device-height：800px）和（orientation：portrait）{ 款式 } @media屏幕和（设备宽度：800px）和（设备高度：480px）和（方向：横向）{ 款式 } 抛弃“唯一”规则！这不是必需的！仅使用“手持”或“屏幕”值！

Answer 3

这也许值得一试：@media all and (device-aspect-ratio: 3/5)。

信息来自：http://cssmediaqueries.com/

Answer 4

Galaxy S2的设备像素比为1.5，因此媒体查询必须是：

@media only screen and（min-device-width：360px）and（max-device-width：533px）

Answer 5

三星Galaxy S2的媒体查询类似于以下代码，您应该将1.5用于-webkit-device-pixel-ratio，仅此而已。

/* Samsung Galaxy S2 ----------- */
/* Portrait and Landscape */
@media screen and (device-width: 320px) and (device-height: 533px) and (-webkit-device-pixel-ratio: 1.5){
    /* Styles */
}

/* Landscape */
@media only screen and (min-device-width: 320px) and (max-device-height: 533px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 1.5){
    /* Styles */
}

/* Portrait */
@media only screen and (min-device-width: 320px) and (max-device-height: 533px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 1.5){
    /* Styles */
}

媒体查询galaxy s2

5 个答案: