Create a gist now

Instantly share code, notes, and snippets.

machMedia Listener Test
<title>MatchMedia Listener Test</title>
<meta name="viewport" content="width=device-width" />
<style type="text/css">
font-family: Helvetica, sans-serif;
padding: 1.5em 1em;
background: red;
text-align: center;
color: #fff;
font-size: 1.2em;
@media (orientation: landscape) {
#colorMe {
background: green;
<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)");
window.onload = function(){
handleOrientationChange("(orientation: landscape)");
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment