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

Question

I have an HTML. 我有一个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>

This HTML works fine when I try that in Chrome Browser. 当我在Chrome浏览器中尝试使用此HTML时，效果很好。 To change the orientation, we can resize the browser. 要更改方向，我们可以调整浏览器的大小。 If the width of the browser is more than Height, it is land scape otherwise it is portrait. 如果浏览器的宽度大于高度，则为横向；否则为纵向。

I tried to create an android application using this file by opening it in the web view and ran the application in the emulator. 我试图通过在Web视图中打开该文件来创建一个Android应用程序，并在模拟器中运行该应用程序。 It is not working then. 那就不行了。

In http://caniuse.com/#feat=matchmedia it is said that matchMedia is supported in Android Browser. 在http://caniuse.com/#feat=matchmedia中，据说Android浏览器支持matchMedia。 Do you have any idea what I am doing wrong? 你知道我在做什么错吗？

I have shared the Android project in https://www.dropbox.com/s/mlbysk3s7tj81mk/orientationtest.zip 我在https://www.dropbox.com/s/mlbysk3s7tj81mk/orientationtest.zip中共享了Android项目

Thanks, Paul 谢谢保罗

Answer 1

Try this one with the " resize " listener. 尝试使用“ 调整大小 ”侦听器。

<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