media-queries - 如何在不使用最大宽度的情况下媒体查询视网膜手机的风景？

Question

我正在我的 Galaxy S3 (1280x720 px) 上测试我的单页网站，但我似乎无法弄清楚最大宽度需要什么。我查了一下，找不到当前的答案——最明确的答案来自“pre-retina”。（或者他们还应该工作吗..？）

随着像素设备变化如此之快，有没有办法只通过设备的 orientatino 来定位媒体查询？

Answer 1

媒体查询还具有“方向”功能，您可以在查询中使用它来检测纵向或横向模式。适合您情况的正确媒体查询是：

@media only screen and (min-device-width: 720px) and (max-device-width: 1280px) and (orientation: landscape) {
/* insert styles here */
}

附带说明一下，如果您需要找出其他有效的媒体查询，我制作了一个带有可选设备预设的便捷媒体查询构建工具（我在这里使用的那个被列为“Galaxy Nexus，横向”）：http://arcsec .ca/media-query-builder/

Answer 2

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
 and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

还有更多，请查看http://css-tricks.com/snippets/css/media-queries-for-standard-devices/