CSS Media query for handling orientation does not work in Android emulator
Question
I have an 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. 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. It is not working then.
In http://caniuse.com/#feat=matchmedia it is said that matchMedia is supported in Android Browser. 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
Thanks, Paul
1 answers
solution1
0 2013-11-11 09:29:35
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.