Question

我有一个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工作正常。要更改方向，我们可以调整浏览器的大小。如果浏览器的宽度超过高度，则为景观，否则为纵向。

我尝试使用此文件创建一个Android应用程序，方法是在Web视图中打开它并在模拟器中运行该应用程序。那时它不起作用。

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

我在https://www.dropbox.com/s/mlbysk3s7tj81mk/orientationtest.zip

中分享了Android项目

谢谢，保罗

Answer 1

使用“ 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>

用于处理方向的CSS Media查询在Android模拟器中不起作用

1 个答案: