旋转设备Google Chrome时,方向显示错误

时间:2014-06-20 12:15:00

标签: javascript html5 google-chrome media-queries device-orientation

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

以下是我已提醒方向的代码。有时当我从风景转向肖像时,它仍然会警告景观,我检查的坐标显示为错误。 测试设备是Google Nexus

平板电脑Google Nexus 7 Andriod版本4.2.2 Chrome应用版本:35.0.1916.141 OS Andriod 4.4.2; Nexus 7 Build / 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>

1 个答案:

答案 0 :(得分:0)

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

Misconception about Window Orientation

解决方案是使用Resize而不是

Portrait/Landscape detection