旋转设备 Google chrome 时显示方向错误答案

【问题标题】：Orientation is shown wrong while rotating device Google chrome旋转设备 Google chrome 时显示方向错误
【发布时间】：2014-06-20 12:15:00
【问题描述】：

我有一个 HTML5 页面，用于确定设备是“纵向”模式还是“横向”模式。

下面是我提醒方向的代码。有时当我从横向转向纵向时，它仍然会以横向警告，并且我检查的坐标显示为错误。测试设备是 Google Nexus

平板电脑 Google Nexus 7 安卓版本 4.2.2 Chrome 应用版本：35.0.1916.141 操作系统 Andriod 4.4.2；Nexus 7 构建/KOT49H Javascript版本： V8 3.25.28.18

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div id="page">

    </div>
</body>
</html>
<script type="text/javascript">
    function pageSetter() {
        if (window.matchMedia("(orientation: portrait)").matches) {
            // you're in PORTRAIT mode
            alert('Portrait');
        }

        if (window.matchMedia("(orientation: landscape)").matches) {
            // you're in LANDSCAPE mode
            alert('LANDSCAPE');
        }
    }
    pageSetter();
    window.addEventListener("orientationchange", function () {
        pageSetter();
    }, false)

</script>

【问题讨论】：

标签： javascript html google-chrome media-queries device-orientation

【解决方案1】：

window.orientation ==0 指的是默认方向。并不意味着它处于纵向模式。下面的链接详细解释。

Misconception about Window Orientation

解决方案是改用 Resize

Portrait/Landscape detection

【讨论】：