Home / Questions / 20599
Accepted
Alvaro Montoro
Asked: 2020-08-16 08:30:14 +0800 CST 2020-08-16 08:30:14 +0800 CST

检测方向是纵向还是横向

  • 772

我想根据设备的方向是垂直（纵向模式）还是水平（横向模式）来应用不同的 CSS 样式。可以只用CSS来实现吗？

有替代方案吗？我想你总是可以用 JavaScript 检测窗口的宽度和高度，然后决定应用什么样式，但我想知道是否有更简单的方法只使用 CSS（如果没有，JS 解决方案会很好）。

javascript

4 Answers

  1. Best Answer

    理论上只有css才有可能，我的意思是理论上的，因为我从未尝试过：

    @media all and (orientation: portrait) { ... }

@media all and (orientation: landscape) { ... }

    w3和MDN上的一些文档。

    根据 w3 规范：

    当视口的高度大于或等于宽度时，方向为纵向，否则为横向。

    MDN 文档中有一个相当有趣的注释：

    请注意，当在移动设备上以纵向模式显示键盘时，视口可能会比高度更宽，因此当时浏览器可能会使用横向样式，而不是纵向。

    一些替代方案：

    • 10

  2. 在 CSS3 中，它存在于media选项中orientation

    @media all and (orientation:portrait) {
  ... 
}
@media all and (orientation:landscape) {
  ...
}

    例子

    html {
	height: 100%;
}
body {
	height: 100%;
}
.demo-wrappper {
	display: table;
	width: 100%;
	height: 100%;
}
.demo-wrappper h1 {
	color: #fff;
	text-align: center;
	margin: 0;

	display: table-cell;
    vertical-align: middle;
}
@media all and (orientation:portrait) {
	body {
		background: #00C203;
	}
	.demo-wrappper .landscape {
		display: none;
	}
}
@media all and (orientation:landscape) {
	body {
		background-color: #F08B48;
	}
	.demo-wrappper .portrait {
		display: none;
	}
}
    <div class="demo-wrappper css-orientation">
	<h1 class="portrait">Portrait</h1>
	<h1 class="landscape">Landscape</h1>
</div>

    • 5

  3. 目前，在 Javascript 中执行此操作的最佳方式是通过 API window.matchMedia() （doc），因为它与浏览器具有最佳兼容性。else尽管如此，在使用新的或非常规浏览器的情况下，添加一个提供解决方法的条件也不错，就像我在下面推荐的那样。

    通过比较设备的高度和宽度，可以根据最大值确定其方向，这种方法的缺点是如果显示设备的键盘可能会失败，因为有些浏览器会从这些中减去键盘占用的空间值改变结果。但是如果检查是在页面加载时完成的，这个问题就不会持续存在，所以这似乎是一个很好的选项 B。

    代码： 

    window.addEventListener("orientationchange", ()=> {
    console.log(getOrientation());
});

function getOrientation() {
    if (window.matchMedia("(orientation: portrait)").matches) {
        var current_mode = 'Portrait';
    }
    else if (window.matchMedia("(orientation: landscape)").matches) {
        var current_mode = 'Landscape';
    }
    else {
        var current_mode = window.innerWidth < window.innerHeight ? "Portrait" : "Landscape";
    }
    return current_mode
};

    • 1

  4. 在 javascript 中，您可以执行以下操作：

    window.addEventListener("orientationchange", ()=> {
    console.log(window.screen.orientation);
});

if (window.matchMedia("(orientation: portrait)").matches) {
    /// portrait codigo
}

if (window.matchMedia("(orientation: landscape)").matches) {
   /// landscape codigo
}
    • 0