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></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。