0

我有一个 HTML。

<html>
<head>
    <Title>Android Orinetation test</title>
</head>
<body>
    <div id="or"></div>
    <script>
        function handleOrientationValue(mql)
        {
            alert("Handler called");
            if(mql.matches) 
            {
                document.getElementById("or").innerHTML = "Orientation : portrait";
            }
            else 
            {
                document.getElementById("or").innerHTML = "Orientation : landscape";
            }
        }
        var portraitOrientationCheck = window.matchMedia("(orientation: portrait)");
        portraitOrientationCheck.addListener(handleOrientationValue);
        handleOrientationValue(portraitOrientationCheck);
    </script>
</body>

当我在 Chrome 浏览器中尝试时，此 HTML 工作正常。要改变方向，我们可以调整浏览器的大小。如果浏览器的宽度大于高度，则为横向，否则为纵向。

我尝试通过在 Web 视图中打开它并在模拟器中运行该应用程序来使用该文件创建一个 android 应用程序。那时它不工作。

在http://caniuse.com/#feat=matchmedia中，据说 Android 浏览器支持 matchMedia。你知道我做错了什么吗？

我在https://www.dropbox.com/s/mlbysk3s7tj81mk/orientationtest.zip中分享了 Android 项目

谢谢，保罗

4

1 回答 1

0

用“ resize ”监听器试试这个。

<html>
<head>
    <Title>Android Orientation test</title>
</head>
<body>
    <div id="or"></div>
    <script>

    function handleOrientation() {
        if(window.innerHeight > window.innerWidth) {
            document.getElementById("or").innerHTML = "Orientation : portrait";
        } else {
            document.getElementById("or").innerHTML = "Orientation : landscape";
        }
    }
    var a = window.addEventListener("resize", function() {
        handleOrientation();
    }, false);

    handleOrientation();
    </script>
</body>
于 2013-11-11T09:29:35.360 回答