CSS媒体查询是否可以检测纵向/横向平板电脑模式？

因为在JS是很容易的….类似的东西

if(window.innerHeight > window.innerWidth){ portrait = true; }else{ portrait = false; } 

我可以使用它…但我想知道是否有可能使用只是CSS和@media样式

有可能是这样的

 @media only screen and (width > height) { //... } 

Answer 1

CSS来检测屏幕方向：

  @media screen and (orientation:portrait) { … } @media screen and (orientation:landscape) { … } 

媒体查询的CSS定义在http://www.w3.org/TR/css3-mediaqueries/#orientation

Answer 2

 @media all and (orientation:portrait) { /* Style adjustments for portrait mode goes here */ } @media all and (orientation:landscape) { /* Style adjustments for landscape mode goes here */ } 

但它仍然看起来像你必须试验

Answer 3

我认为我们需要编写更具体的媒体查询。 确保如果你写一个媒体查询它应该不会影响到其他视图（手机，标签，桌面），否则可能是麻烦。 我想build议写一个基本的媒体查询各自的设备，涵盖了视图和一个方向媒体查询，你可以具体代码更多的方向查看其良好的做法。 我们不需要同时写两个媒体定位查询。 你可以参考我下面的例子。 如果我的英语写作不太好，我感到抱歉。 例如：

移动

 @media screen and (max-width:767px) { ..This is basic media query for respective device.In to this media query CSS code cover the both view landscape and portrait view. } @media screen and (min-width:320px) and (max-width:767px) and (orientation:landscape) { ..This orientation media query. In to this orientation media query you can specify more about CSS code for landscape view. } 

为平板电脑

 @media screen and (max-width:1024px){ ..This is basic media query for respective device.In to this media query CSS code cover the both view landscape and portrait view. } @media screen and (min-width:768px) and (max-width:1024px) and (orientation:landscape){ ..This orientation media query. In to this orientation media query you can specify more about CSS code for landscape view. } 

桌面

按照您的devise要求享受…（：

谢谢，吉图

Answer 4

在Javascript中，最好使用screen.width和screen.height 。 这两个值在所有现代浏览器中都可用。 它们给出了屏幕的真实尺寸，即使在应用程序启动时浏览器已经缩小了。 当浏览器缩小时， window.innerWidth发生变化，这在移动设备上不会发生，但可能发生在PC和笔记本电脑上。

移动设备在纵向和横向模式之间翻转时， screen.width和screen.height的值会发生变化，所以可以通过比较这些值来确定模式。 如果screen.width大于1280px你正在处理一台PC或笔记本电脑。

你可以在Javascript中构造一个事件监听器来检测两个值的翻转。 要专注的肖像screen.width值是320px（主要是iPhone），360px（大多数其他手机），768px（小型平板电脑）和800px（常规平板电脑）。