使用 Javascript 检测设备方向

有时，您只想知道屏幕是纵向模式还是横向模式。您可能希望在两个主要位置执行此操作：在Javascript和CSS中。让我们看看如何在两者中检测屏幕的方向。

在 CSS 中检测方向#

在 CSS 中，只需使用以下媒体查询即可匹配任何纵向或横向设备：

/* Portrait orientation */
@media screen and (orientation: portrait) {
    
}
/* Landscape orientation */
@media screen and (orientation: landscape) {

}

在 Javascript 中检测方向#

由于screen.orientation具有补丁支持，您可以在 Javascript 中使用相同的媒体查询，如下所示：

let portrait = window.matchMedia("(orientation: portrait)");

portrait.addEventListener("change", function(e) {
    if(e.matches) {
        // Portrait mode
    } else {
        // Landscape
    }
})

检测 Javascript 中的方向变化#

如果您需要简单地检测用户何时改变方向，您可以使用以下事件侦听器：

screen.orientation.addEventListener("change", function(e) {
    // Do something on change
});

目前，这在 Safari 中不受支持，因此您的里程可能会有所不同。如果需要，您可以使用matchMedia上面的查询来实现类似的功能。

结论#

检测屏幕方向很容易——将来我们将能够screen.orientation可靠地做到这一点。目前，最好坚持使用 CSS 媒体查询和window.matchMedia.