在JavaScript中检测屏幕方向

让我们来看看如何在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 。

发布于DZone，由Johnny Simpson授权，DZone MVB。点击这里查看原文。