JavaScript根據(jù)CSS的MediaQueries來判斷瀏覽設(shè)備的方法_javascript技巧

首先隨便新建一個用來做判斷的類，然后通過 Media Queries 來對這個類的 z-index 屬性賦予不同的值。這個類僅作為 JavaScript 讀取使用，所以需要將其移出屏幕窗口，讓瀏覽者不可見以免引起意外情況。

作為演示，下面代碼設(shè)置了四種設(shè)備狀態(tài)：桌面普通版、小屏幕桌面版、平板電腦版和手機(jī)版。

/* 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 已經(jīng)就位了，那么就需要用 JavaScript 來生成了一個臨時的 DOM 對象，然后為它設(shè)置對應(yīng)的類，然后再讀取這個對象的 z-index 值。原生的寫法如下：

這樣，就可以用一下代碼來判斷設(shè)備狀態(tài)，然后執(zhí)行相應(yīng)的 JavaScript 代碼：

這里如果你使用的是 jQuery，直接使用下面代碼就可以了：

先創(chuàng)建，然后獲取，最后刪掉這個節(jié)點(diǎn)，具體的設(shè)備會在你的控制臺中輸出，點(diǎn)擊這里查看 Demo ，可以試著拖動一下中間的邊框，然后點(diǎn)擊 Run。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com