5

我为我的网站开发了一个响应式主题，通过在我的 css 文件上使用媒体查询。

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

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

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

谢谢

4

5 回答 5

8

您的代码应该可以工作。

您是否尝试过添加“方向”，例如：

@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) {

}
于 2012-05-16T20:39:42.773 回答
4

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

@media screen and (device-width: 480px) and (device-height: 800px) and (orientation: portrait) { styles } @media screen and (device-width: 800px) and (device-height: 480px) and (orientation : Landscape) { styles } 抛弃“唯一”规则！这不是必需的！仅使用“手持”或“屏幕”值！

于 2013-04-13T17:25:38.843 回答
1

三星 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 */
}
于 2018-08-22T13:29:39.343 回答
0

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

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

于 2012-11-14T15:33:59.437 回答
0

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

@media only screen and (min-device-width: 360px) and (max-device-width: 533px)

于 2014-05-19T17:54:09.917 回答