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

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时，效果很好。 要更改方向，我们可以调整浏览器的大小。 如果浏览器的宽度大于高度，则为横向；否则为纵向。

我试图通过在Web视图中打开该文件来创建一个Android应用程序，并在模拟器中运行该应用程序。 那就不行了。

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

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

谢谢保罗

Answer 1

尝试使用“ 调整大小 ”侦听器。

<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 个解决方案

解决方案1
0 2013-11-11 09:29:35

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

问题描述

1 个解决方案

解决方案1 0 2013-11-11 09:29:35

解决方案1
0 2013-11-11 09:29:35