<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Enquire Test</title>
<meta name="viewport" content="width=device-width">
<!-- Normalize CSS -->
<link rel="stylesheet" src="http://normalize-css.googlecode.com/svn/trunk/normalize.css"/>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css"/>
</head>
<body>
<div id="result-1">
</div>
<div id="result-2">
</div>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Enquire.js -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/enquire.js/2.0.0/enquire.min.js"></script>
<script>
(function () {
var result1 = $('#result-1')
var result2 = $('#result-2')
enquire.register("screen and (max-width: 959px)", {
deferSetup: true,
setup: function () {result1.load('ajax/480.html');},
match: function () {result1.fadeIn();},
unmatch: function () {result1.hide();}
});
enquire.register("screen and (min-width: 960px)", {
deferSetup: true,
setup: function () {result2.load('ajax/960.html');},
match: function () {result2.fadeIn();},
unmatch: function () {result2.hide();}
});
})();
</script>
</body>
</html>