Skip to content

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
machMedia Listener Test
<html>
<head>
<title>MatchMedia Listener Test</title>
<meta name="viewport" content="width=device-width" />
<style type="text/css">
body{
font-family: Helvetica, sans-serif;
}
#colorMe{
padding: 1.5em 1em;
background: red;
text-align: center;
color: #fff;
font-size: 1.2em;
}
@media (orientation: landscape) {
#colorMe {
background: green;
}
}
</style>
</head>
<body>
<h1>MatchMedia Listener Test</h1>
<div id="colorMe"></div>
<script type="text/javascript">
function handleOrientationChange(mql) {
if (mql.matches) { //landsacpe
document.getElementById('colorMe').innerHTML = 'Landscape';
} else {
/* The device is currently in portrait orientation */
document.getElementById('colorMe').innerHTML = 'Portrait';
}
}
var mql = window.matchMedia("(orientation: landscape)");
mql.addListener(handleOrientationChange);
window.onload = function(){
handleOrientationChange("(orientation: landscape)");
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.