viewport寬度小於400px大於401時的畫面
javascript寫法<meta name="viewport" content="width=device-width, maximum-scale=1">
<script src="matchMedia.js"></script>
/*使用matchMedia.js程式庫，讓瀏覽器支援CSSOM媒體詢問功能 (IE8之前不適用)*/
<script>
window.addEventListener('load', mqfunc);
/*事件監聽器window.addEventListener('事件', 開啟); */
window.addEventListener('resize', mqfunc);
/*在viewport 時觸發'resize'事件, 執行mqfunc函數 */
function mqfunc() {
if (window.matchMedia("(max-width:400px)").matches) {
document.getElementById("text").innerHTML = "小於400px";
} else {
document.getElementById("text").innerHTML = "大於401px";
}
}
</script>
<body>
<div id="text">無法執行SSOM功能</div>
</body>
jQuery寫法
<meta name="viewport" content="width=device-width, maximum-scale=1"><script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="matchMedia.js"></script>
<script>
$(window).bind('load resize', function() {
if (window.matchMedia("(max-width:400px)").matches) {
$("#text").html("小於400px");
} else {
$("#text").html("401px以上");
}
});
</script>
<body>
<div id="text">無法執行CSSOM功能</div>
</body>
viewport寬度(小於400px)，(401px~800px之間)，(大於800px)三種條件的畫面
javascript寫法<meta name="viewport" content="width=device-width, maximum-scale=1">
<script src="matchMedia.js"></script>
<script>
window.addEventListener('load', mqfunc);
window.addEventListener('resize', mqfunc);
if (window.matchMedia("(max-width:400px)").matches) {
document.getElementById("text").innerHTML = "小於400px";
} else if (window.matchMedia("(min-width:401px) and (max-width:800px)").matches) {
document.getElementById("text").innerHTML = "在401～800px之間";
} else {
document.getElementById("text").innerHTML = "大於801px";
}
}
</script>
<body>
<div id="text">無法執行CSSOM功能</div>
</body>
jQuery寫法
<meta name="viewport" content="width=device-width, maximum-scale=1">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="matchMedia.js"></script>
<script>
$(window).bind('load resize', function() {
if (window.matchMedia("(max-width:400px)").matches) {
$("#text").html("小於400px");
} else if (window.matchMedia("(min-width:401px) and (max-width:800px)").matches) {
$("#text").html("在401～800px之間");
} else {
$("#text").html("801px以上");
}
});
</script>
<body>
<div id="text">無法執行CSSOM功能<</div>
</body>
註:
使用matchMedia.js程式庫先至以下網址下載matchMedia.js檔再匯入.js的連結
https://github.com/paulirish/matchMedia.js/
參考資料：HTML5+CSS智慧型手機專用網站設計使用matchMedia.js程式庫先至以下網址下載matchMedia.js檔再匯入.js的連結
https://github.com/paulirish/matchMedia.js/
