使用事件侦听器

Question

基本上，我正在与不同方位的桌子进行匹配游戏。如果将浏览器调整为横向或移动设备，则将其设为水平表。如果是肖像，那么垂直表。我需要一个事件监听器来检测是纵向还是横向。

给出两个可以一起解决或使用单独代码的问题。

问题1

我在桌面上查看我的页面并调整窗口大小，使宽度= 768px，高度= 767px，然后激活横向模式。

是否有事件监听器确定是否应该只显示页面的纵向或横向版本

if(window.innerHeight > window.innerWidth) {
    portrait = true;
    /*display to portrait version of page*/
}
else {
    portrait = false;
    /*display to landscape version of page*/
}

还是我必须创建一个自定义事件监听器，在这种情况下如何？

问题2

我在移动设备上查看我的页面。当它通过转动检测到它处于横向模式时，激活横向模式。

我相信这可以通过

来解决

window.addEventListener("orientationchange", function() {
/*display landscape/portrait version*/
}, false);

Answer 1

在确定用户是否处于横向模式后，根据您实际尝试做的事情，有几种不同的实现：

检测用户是横向还是纵向

function readDeviceOrientation() {          
    if (Math.abs(window.orientation) === 90) {
        // Landscape
    } else {
        // Portrait
    }
}

使用方向媒体查询调整样式

/* For portrait, we want the tool bar on top */
@media screen and (orientation: portrait) {
   #toolbar {
       width: 100%;
   }
}

/* For landscape, we want the tool bar stick on the left */
@media screen and (orientation: landscape) {
    #toolbar {
        position: fixed;
        width: 2.65em;
        height: 100%;
    }

    p {
        margin-left: 2em;
    }

    li + li {
        margin-top: .5em;
    }
}

使用jQuery

$( window ).resize(function() {
    if (Math.abs(window.orientation) === 90) {
        // Do Landscape
    } else {
        // Do Portrait
    }
};   

听取方向改变

screen.addEventListener("orientationchange", function () {
    console.log("The orientation of the screen is: " + screen.orientation);
});