媒体查询捕获平板电脑纵向模式

Question

我有以下规则:

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

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

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

@media only screen and (min-width: 768px) /* tablets and desktops */

如何捕获平板电脑的纵向模式，而不影响其他规则？

- qwerty

Answer 1

在设备像素宽度方面，“平板电脑纵向”没有标准。

媒体查询中的orientation查询并不是非常可靠，也没有广泛支持。在这里查看。最好使用min-width和max-width媒体查询，并尝试让其在所有可能的宽度下工作，而不是针对特定方向进行定位。这基本上就是响应式设计的工作方式。

纵向模式的平板电脑通常在768px到约960px之间。

- Ennui

---

编写于2010年4月9日。 - Santiago Rebella

我知道。虽然这篇文章所强调的并不那么明显，但设备方向和方向改变事件（JS）仍然非常难以在安全/跨设备的方式下可靠地检测到。 - Ennui

即使浏览器/设备兼容性对于“方向”媒体查询达到了100％，我关于构建适用于所有可能宽度的网站的观点仍然是完全相关的。在我看来，如果您需要了解方向并将其纳入CSS中，最好使用JS进行检测，然后根据需要添加类等。 - Ennui

Answer 2

@media only screen and (min-width: 768px) and (orientation:portrait) and (min-height:1024px)

你应该除了指定最小宽度和最小高度外，还要结合方向指定最大宽度和最大高度，这样就可以在不影响平板电脑或个人电脑等其他设备的情况下，真正适配移动设备。目前只有为移动设备指定最小宽度会影响所有设备，包括那些符合最小宽度的设备。

- Santiago Rebella

Answer 3

纯CSS有助于在平板电脑中隐藏内容的辅助类。

它用于平板电脑的媒体查询如下：

@media (min-width: 768px) and (max-width: 979px)

你也可以尝试添加(orientation:portrait)。

（如http://yui.yahooapis.com/pure/0.3.0/pure.css中所示）

- Churro