Question

我正在尝试根据屏幕宽度设置元素的宽度。我的代码完全适用于桌面和大多数移动设备，除了Galaxy note 2.我已经尝试过这个查询但无济于事

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px), only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
    // my css here
}

Answer 1

Galaxy Note II将在旋转过程中切换innerHeight和Screen.height。 innerHeight / Width和Screen.Height / Width列在下面

Portrait  innerHeight/Screen.Height 615/1280
          innerWidth/Screen.Width   360/720
Landscape innerHeight/Screen.Height 335/720
          innerWidth/Screen.Width   640/1280

根据这篇文章 http://tripleodeon.com/2011/12/first-understand-your-screen/ 媒体查询min / max-device-height / width等于screen.height / width 所以对于Galaxy Note II，我的媒体查询列在下面

/*  Galaxy Note2 - Portrait */
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-height: 1200px) and (max-device-height: 1300px) and (orientation: portrait) {
    Code here
}

/*  Galaxy Note2 - landscape Due to the Screen Height and Width is changing during orientation changes */
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 1270px) and (max-device-width: 1300px) and (orientation: landscape) {
    Code here
}

Answer 2

您可以使用条件样式表定位该手机。这有点像用大锤修复凹痕，但它将工作。您可以parse the user agent string并为该手机型号添加样式表。

媒体查询三星Galaxy note 2

2 个答案: