Javascript 用于处理方向的CSS媒体查询在Android emulator中不起作用_Javascript_Android_Html

Javascript 用于处理方向的CSS媒体查询在Android emulator中不起作用

javascript android html

Javascript 用于处理方向的CSS媒体查询在Android emulator中不起作用,javascript,android,html,Javascript,Android,Html,我有一个HTML <html> <head> <Title>Android Orinetation test</title> </head> <body> <div id="or"></div> <script> function handleOrientationValue(mql) { alert("Han

我有一个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>


安卓定向测试
函数handleOrientationValue（mql）
{
警报（“呼叫处理程序”）；
if（mql.matches）
{
document.getElementById（“或”）.innerHTML=“方向：纵向”；
}
其他的
{
document.getElementById（“或”）.innerHTML=“方向：横向”；
}
}
var-tractiveorientoncheck=window.matchMedia（“（方向：纵向）”）；
肖像方向检查.addListener（handleOrientationValue）；
handleOrientationValue（肖像方向检查）；

当我在Chrome浏览器中尝试时，这个HTML很好用。要更改方向，可以调整浏览器的大小。如果浏览器的宽度大于高度，则为景观，否则为纵向

我试图通过在web视图中打开该文件来创建一个android应用程序，并在emulator中运行该应用程序。那时候它不起作用了

据说Android浏览器支持matchMedia。你知道我做错了什么吗

我已经在网上分享了Android项目

谢谢， Paul

使用“调整大小”侦听器尝试此选项

<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>


安卓定向测试
函数handleOrientation（）{
如果（window.innerHeight>window.innerWidth）{
document.getElementById（“或”）.innerHTML=“方向：纵向”；
}否则{
document.getElementById（“或”）.innerHTML=“方向：横向”；
}
}
var a=window.addEventListener（“调整大小”，函数（）{
handleOrientation（）；
}，假）；
handleOrientation（）；

这是一个黑客攻击，但是你可以尝试使用

如果（window.innerHeight>window.innerWidth）{/…}

@Fab你的意思是，我可以使用你建议的检查，而不是（mql.matches）？问题是方向更改时不会调用handleOrientationValue（）函数本身。有人能帮我吗？谢谢..调整大小侦听器在Android中运行良好。但是，如果我们在iOS中尝试相同的代码，当方向改变时，高度和宽度不会改变。是否有一种方法可以使用定向侦听器本身。我尝试了window.matchMedia（）API和matchMedia.js polyfill。但在Android上似乎不起作用。如果matchMedia polyfill能够工作，那也太好了。