如何使用 CSS 媒体查询检测设备方向？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5735467/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to detect the device orientation using CSS media queries?
提问by Francesco
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) { ... }
回答by Richard Schneider
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
回答by mistagrooves
@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
但看起来你仍然需要尝试
回答by jitu
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
谢谢，吉图
回答by BastianBalthasarBux
I would go for aspect-ratio, it offers way more possibilities.
我会选择纵横比，它提供了更多的可能性。
/* 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) {
...
}
Both, orientation and aspect-ratio depend on the actual size of the viewport and have nothing todo with the device orientation itself.
方向和纵横比都取决于视口的实际大小，与设备方向本身无关。
Read more: https://dev.to/ananyaneogi/useful-css-media-query-features-o7f
阅读更多：https: //dev.to/ananyaneogi/useful-css-media-query-features-o7f
回答by BlackMagic
In Javascript it is better to use screen.widthand 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.innerWidthchanges when the browser is scaled down, which can't happen on mobile devices but can happen on PCs and laptops.
在 Javascript 中最好使用screen.width和screen.height。这两个值在所有现代浏览器中都可用。它们给出了屏幕的真实尺寸，即使在应用程序启动时浏览器已经缩小。window.innerWidth当浏览器缩小时会发生变化，这不会发生在移动设备上，但可能发生在 PC 和笔记本电脑上。
The values of screen.widthand screen.heightchange when the mobile device flips between portrait and landscape modes, so it is possible to determine the mode by comparing the values. If screen.widthis greater than 1280px you're dealing with a PC or laptop.
当移动设备在纵向和横向模式之间切换时，screen.width和的值会screen.height发生变化，因此可以通过比较值来确定模式。如果screen.width大于 1280 像素，则您正在处理 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 中构造一个事件侦听器来检测两个值何时翻转。要关注的纵向 screen.width 值是 320px（主要是 iPhone）、360px（大多数其他手机）、768px（小型平板电脑）和 800px（普通平板电脑）。
