CSS 部分
首先隨便新建一個用來做判斷的類，然后通過 Media Queries 來對這個類的 z-index 屬性賦予不同的值。這個類僅作為 JavaScript 讀取使用，所以需要將其移出屏幕窗口，讓瀏覽者不可見以免引起意外情況。
作為演示，下面代碼設置了四種設備狀態：桌面普通版、小屏幕桌面版、平板電腦版和手機版。
/* default state */.state-indicator { position: absolute; top: -999em; left: -999em; z-index: 1;}/* small desktop */@media all and (max-width: 1200px) { .state-indicator { z-index: 2; }}/* tablet */@media all and (max-width: 1024px) { .state-indicator { z-index: 3; }}/* mobile phone */@media all and (max-width: 768px) { .state-indicator { z-index: 4; }} JavaScript 判斷
CSS 已經就位了，那么就需要用 JavaScript 來生成了一個臨時的 DOM 對象，然后為它設置對應的類，然后再讀取這個對象的 z-index 值。原生的寫法如下：
// Create the state-indicator elementvar indicator = document.createElement('div');indicator.className = 'state-indicator';document.body.appendChild(indicator);// Create a method which returns device statefunction getDeviceState() { return parseInt(window.getComputedStyle(indicator).getPropertyValue('z-index'), 10);}getDeviceState() 函數返回的就是 z-index 的值，為了增強一下可讀性，可以用 switch 函數來規范輸出一下：function getDeviceState() { switch(parseInt(window.getComputedStyle(indicator).getPropertyValue('z-index'), 10)) { case 2: return 'small-desktop'; break; case 3: return 'tablet'; break; case 4: return 'phone'; break; default: return 'desktop'; break; }} 這樣，就可以用一下代碼來判斷設備狀態，然后執行相應的 JavaScript 代碼：
if(getDeviceState() == 'tablet') { // 平板電腦下執行的 JavaScript 代碼} 這里如果你使用的是 jQuery，直接使用下面代碼就可以了：
$(function(){ $('body').append('<div class="state-indicator"></div>'); function getDeviceState() { switch(parseInt($('.state-indicator').css('z-index'),10)) { case 2: return 'small-desktop'; break; case 3: return 'tablet'; break; case 4: return 'phone'; break; default: return 'desktop'; break; } } console.log(getDeviceState()); $('.state-indicator').remove();}); 先創建，然后獲取，最后刪掉這個節點，具體的設備會在你的控制臺中輸出，點擊這里查看 Demo ，可以試著拖動一下中間的邊框，然后點擊 Run。
