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

In JavaScript the orientation mode can be detected using:

在JavaScript中，定位模式可以使用:

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

However, is there a way to detect the orientation using CSS only?

但是，是否有一种方法可以仅使用CSS检测方向?

Eg. something like:

如。喜欢的东西:

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

4 个解决方案

#1

282

CSS to detect screen orientation:

CSS检测屏幕方向:

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

The CSS definition of a media query is at http://www.w3.org/TR/css3-mediaqueries/#orientation

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

#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 */
}

but it still looks like you have to experiment

但看起来你还是要做实验

#3

I think we need to write more specific media query. Make sure if you write one media query it should be not effect to other view (Mob,Tab,Desk) otherwise it can be trouble. I would like suggest to write one basic media query for respective device which cover both view and one orientation media query that you can specific code more about orientation view its for good practice. we Don't need to write both media orientation query at same time. You can refer My below example. I am sorry if my English writing is not much good. Ex:

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

For Mobile

为移动

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

}

For Tablet

为平板电脑

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

}

Desktop

桌面

make as per your design requirement enjoy...(:

按您的设计要求制作……

Thanks, Jitu

谢谢,Jitu

#4

In Javascript it is better to use screen.width and screen.height. These two values are available in all modern browsers. They give the real dimensions of the screen, even if the browser has been scaled down when the app fires up. window.innerWidth changes when the browser is scaled down, which can't happen on mobile devices but can happen on PCs and laptops.

在Javascript中，最好使用screen。宽度和screen.height。这两个值在所有现代浏览器中都是可用的。他们给出了屏幕的真实尺寸，即使当应用程序启动时浏览器被缩小了。窗口。当浏览器缩小时，innerWidth值就会改变，这在移动设备上不会发生，但在个人电脑和笔记本电脑上也会发生。

The values of screen.width and screen.height change when the mobile device flips between portrait and landscape modes, so it is possible to determine the mode by comparing the values. If screen.width is greater than 1280px you're dealing with a PC or laptop.

屏幕上的值。宽度和屏幕。当移动设备在纵向模式和横向模式之间切换时，高度会发生变化，因此可以通过比较这些值来确定模式。如果屏幕上。宽度大于1280px你处理的是PC或笔记本电脑。

You can construct an event listener in Javascript to detect when the two values are flipped. The portrait screen.width values to concentrate on are 320px (mainly iPhones), 360px (most other phones), 768px (small tablets) and 800px (regular tablets).

您可以在Javascript中构造一个事件监听器来检测两个值何时被翻转。这幅画像的屏幕。要关注的宽度值是320px(主要是iphone)、360px(其他手机)、768px(小平板)和800px(普通平板)。

#1

282