[Javascript]matchMedia not works on iPad

by Wenjie Hu

HTML

<div class="content"></div>

CSS

.content {
    width: 300px;
    height: 200px;
    border: 1px solid #ccc;
}
@media screen and (orientation: landscape) {
    .foo {
    }
    .content {
    }
}

JavaScript

(function () {
    if (window.matchMedia) {
        var mql = window.matchMedia('screen and (orientation: landscape)');
        mql.addListener(function (mediaQueryList) {
            if (mediaQueryList.matches) {
                $('.content').css('background', 'orange');
            } else {
                $('.content').css('background', 'blue');
            }
        });
    }
}(jQuery));