嘻多瞇圖像傳達: 依照viewport的寬度顯示內容&支援CSSOM媒體詢問功能

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);

function 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寫法

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智慧型手機專用網站設計