使用CSS媒體查詢(Media Queries)和JavaScript判斷瀏覽器設備類型的方法

2024-07-11 08:31:19

字體：大中小

來源：轉載

供稿：網友

有無數的理由要求我們在任何時候都應該知道用戶是使用的什么設備瀏覽我們的網站——寬屏，普通屏，平板，手機？知道這些特征，我們web應用的CSS和JavaScript才能同步做相應的操作。在給Mozilla Developer Networks改版設計的過程中，我發現使用CSS媒體查詢(media queries)雖然非常的有效，但有時，JavaScript卻不能及時知道用戶瀏覽設備的狀態。瀏覽網站的用戶使用的是桌面電腦，還是平板，還是手機？這對于CSS來說很容易，但CSS卻無法將這些信息告訴JavaScript。我發明了一種基于CSS媒體查詢和z-index屬性的方法，能告訴JavaScript用戶當前使用的是什么屏幕，這樣我能調整JavaScript的動作來響應這種屏幕尺寸。

CSS代碼

首先最重要的還是CSS媒體查詢代碼。這里只是示例，我們創建了三個媒體查詢規則(但不包括缺省的“all”)，它能控制四種屏幕情況：桌面(這是缺省狀態，不需要媒體查詢規則)，“小屏幕”，平板，手機。針對每一種屏幕，我們給它一種不同的z-index值，這個值我們可以用JavaScript檢測到。我們把這個元素定位到屏幕外，這樣它就不會顯示出來；記住，它的作用就是存放z-index值，我們要用javaScript獲取這個值。

復制代碼

代碼如下:
/* 缺省屏幕 */
.state-indicator {
position: absolute;
top: -999em;
left: -999em;
z-index: 1;
}
/* 小屏幕 */
@media all and (max-width: 1200px) {
.state-indicator {
z-index: 2;
}
}
/* 平板 */
@media all and (max-width: 1024px) {
.state-indicator {
z-index: 3;
}
}
/* 手機 */
@media all and (max-width: 768px) {
.state-indicator {
z-index: 4;
}
}

每種z-index都在告訴我們的JavaScript當前的用戶使用的是什么規格的屏幕。我們并不像知道用戶究竟使用的是什么設備，因為你可以將瀏覽器寬度拉的很窄，但我們需要就是可視寬度，這樣我們可以調整應用的布局。

JavaScript代碼

也許你認為可以在DomContentLoaded時知道屏幕的大小，但我們需要實時知道屏幕的大小(因為用戶會調整瀏覽器窗口的大小)，我們需要有個方法獲取當前窗口的屬性：

復制代碼

代碼如下:
// 創建狀態指示元素
var indicator = document.createElement('div');
indicator.className = 'state-indicator';
document.body.appendChild(indicator);
// 獲取設備類別的方法
function getDeviceState() {
return parseInt(window.getComputedStyle(indicator).getPropertyValue('z-index'), 10);
}

使用這個方法，你就能檢測出頁面布局/js飾件中那些需要顯示，那些需要隱藏。

上一篇：CSS通過RGBa將一個元素設置為透明效果

下一篇：愚人節巧用CSS開個極客式玩笑以chrome為例