如何使用 CSS 媒体查询检测设备方向?

Posted

技术标签:

【中文标题】如何使用 CSS 媒体查询检测设备方向?【英文标题】:How to detect the device orientation using CSS media queries? 【发布时间】:2011-08-09 18:41:30 【问题描述】:

javascript 中,可以使用以下方法检测方向模式:

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

但是,有没有办法仅使用 CSS 来检测方向?

例如。类似:

@media only screen and (width > height)  ... 

【问题讨论】:

【参考方案1】:

用于检测屏幕方向的 CSS:

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

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

【讨论】:

注意:此值与实际设备方向不对应。在大多数设备上以纵向打开软键盘会导致视口变得比高度更宽,从而导致浏览器使用横向样式而不是纵向。 @JohannCombrink 你提到这一点真的很重要。打开键盘会弄乱设计。很好,你指出了这一点。 参考@JohannCombrink 的评论:***.com/q/8883163/363448 在弹出键盘时应用不同的样式可能不是一件坏事,因为可见区域通常更适合适用于横向模式的样式。所以可能不会很糟糕。 我喜欢 Muhammad 的评论:如果软件键盘导致视口比宽度短,那么视口将因此是横向的(即使您通常拿着物理设备)。在我看来,CSS 正在按预期工作。【参考方案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 */

但看起来你仍然需要experiment

【讨论】:

方向取决于设备。某些平板电脑在横向模式下报告方向 = 0。 iPhone 的报告与三星 Galaxy 不同。【参考方案3】:

我认为我们需要编写更具体的媒体查询。确保如果您编写一个媒体查询,它不应该影响其他视图(Mob、Tab、Desk),否则可能会很麻烦。我想建议为各自的设备编写一个基本的媒体查询,它涵盖视图和一个方向媒体查询,您可以具体编写更多关于方向视图的代码,以获得良好的实践。我们不需要同时编写两个媒体方向查询。你可以参考我下面的例子。如果我的英文写作不太好,我很抱歉。 例如:

适用于移动设备

@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.


桌面

按照您的设计要求享受...(:

谢谢, 极途

【讨论】:

【参考方案4】:

我会选择纵横比,它提供了更多的可能性。

/* Exact aspect ratio */
@media (aspect-ratio: 2/1) 
    ...


/* Minimum aspect ratio */
@media (min-aspect-ratio: 16/9) 
    ...


/* Maximum aspect ratio */
@media (max-aspect-ratio: 8/5) 
    ...

方向和纵横比都取决于视口的实际大小,与设备方向本身无关。

阅读更多:https://dev.to/ananyaneogi/useful-css-media-query-features-o7f

【讨论】:

纵横比是取决于设备的方向 - 还是每个设备都固定?【参考方案5】:

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

screen.widthscreen.height的值在移动设备在纵向和横向模式之间切换时会发生变化,因此可以通过比较值来确定模式。如果screen.width 大于 1280 像素,则表示您使用的是 PC 或笔记本电脑。

您可以在 Javascript 中构造一个事件侦听器来检测两个值何时翻转。要关注的纵向 screen.width 值是 320px(主要是 iPhone)、360px(大多数其他手机)、768px(小型平板电脑)和 800px(普通平板电脑)。

【讨论】:

需要注意的是,ios 不会在 iPhone 旋转时翻转 screen.widthscreen.height 值。它总是报告相同的值。您必须使用 window.orientation 属性来确定设备是否已旋转...(横向模式的值为 90 或 -90。) 我很高兴这个答案就在这里,因为如果纯 CSS 方法由于任何原因不起作用,它会导致下一个合乎逻辑的解决方案。

以上是关于如何使用 CSS 媒体查询检测设备方向?的主要内容,如果未能解决你的问题,请参考以下文章

CSS3媒体查询总结

CSS 媒体查询 - 软键盘打破 css 方向规则 - 替代解决方案?

CSS 媒体查询:桌面上的设备宽度

媒体查询

媒体查询介绍

媒体查询断点上的 CSS 重置值(调整窗口大小或方向更改)