📅 最后修改于: 2023-12-03 15:10:53.155000 🧑 作者: Mango
屏幕旋转是移动端常见的操作之一，因此在开发移动端Web应用时，检测屏幕旋转是非常重要的。本文将介绍如何使用JavaScript检查屏幕旋转。
window.orientation属性会返回设备的方向，返回值为以下几种：
下面是一个例子，在屏幕旋转时使用console.log输出window.orientation的值：
window.addEventListener("orientationchange", function() {
console.log(window.orientation);
});
css3中添加了@media查询，针对不同的屏幕尺寸设置不同的样式或布局。通过媒体查询，我们也可以检测屏幕旋转。例如下面的代码：
@media all and (orientation:portrait) { /* 竖屏 */ }
@media all and (orientation:landscape) { /* 横屏 */ }
matchMedia()方法返回一个布尔值，表示CSS媒体查询表达式是否与当前页面匹配。我们可以通过以下代码检测屏幕旋转：
var isPortrait = window.matchMedia("(orientation: portrait)").matches;
var isLandscape = window.matchMedia("(orientation: landscape)").matches;
以上是三种检测屏幕旋转的方法，你可以根据自己的需求来选择使用哪一种。需要注意的是，window.orientation在新版本的Chrome和Firefox中已经废弃，未来的发展趋势将是使用Media Queries或者MatchMedia()方法检测屏幕旋转。