用JavaScript如何來判斷是否為移動設備

文講解如何使用javascript來判斷是否為移動設備！由于移動設備的顯示屏幕相對于桌面顯示器來說小很多，在桌面顯示器上能夠正常顯示的內容，到了移動設備中就不正常了。為了實現移動端和桌面端的相互跳轉，我們可以通過JavaScript來判斷當前的設備是否是移動設備，然后執行相應的代碼。

通過js來判斷當前的設備

下面的代碼片段能夠檢測6種不同的移動設備：

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {

// 執行相應代碼或直接跳轉到手機頁面

} else {

// 執行桌面端代碼

}

上面的js代碼可以判斷當前設備是否是Android、iPhone或iPad等六種移動設備中的一種。如果你需要單獨檢測當前設備是否是某種指定的設備，例如是否是iPhone，可以使用下面的代碼：

if( iPhone.test(navigator.userAgent) ) {

alert("這是iPhone設備");

} else {

alert("不是iPhone設備");

}

通過device.js來判斷當前的設備

device.js是一個用于檢查設備操作系統的js插件。使用它可以檢測iOS, Android, Blackberry, Windows, Firefox OS, MeeGo, AppleTV等系統，還可以判斷當前的設備是橫向的還是縱向的。

device.js會在你的頁面<html>元素中插入相應的class類，例如：

在iphone中使用device.js

在Android平板中使用device.js

在藍莓系統中使用device.js

device.js支持的設備有：

iOS: iPhone, iPod, iPad

Android: Phones & Tablets

Blackberry: Phones & Tablets

Windows: Phones & Tablets

Firefox OS: Phones & Tablets

使用device.js插件的方法是在頁面中引入device.js文件，在瀏覽器解析頁面時，根據當前的設備，device.js就會在<html>元素中插入不同的class類。這些class類對應的設備如下表所示：

根據當前設備屏幕是橫向還是縱向的，device.js會在

<html>

元素中插入相應的class類。

另外，device.js還提供了一組用于判斷設備的js方法，使用方法如下：

if(device.mobile()){

//執行移動設備的方法

}

所有可用的判斷方法如下表所示：

判斷設備方向的js方法有：

斷用戶使用的瀏覽器是否為 PC 還是移動設備，有時候項目中需要用到，很方便的檢測，源生的方法。可在需要的項目中當全局方法來使用。

下面給出js判斷處理代碼，以作參考。

(function getMobileDevice(window) {
var ua=navigator.userAgent;
var mobile=/AppleWebKit.*Mobile.*/.test(ua) || /AppleWebKit/.test(ua); // 是否為移動終端
var ios=/\(i[^;]+;( U;)? CPU.+Mac OS X/.test(ua); // ios終端
var android=/(Android);?[\s\/]+([\d.]+)?/.test(ua); // android終端或者uc瀏覽器
var iphone=/iphone/i.test(ua); // iphone
var iPad=/iPad/i.test(ua); // ipad
var weixin=/micromessenger/i.test(ua); // weixin
var chrome=/Chrome\/([\d.]+)/.test(ua) || /CriOS\/([\d.]+)/.test(ua); // Chrome
var mozilla=ua.indexOf('Gecko') > -1 && ua.indexOf('KHTML')==-1; // 火狐內核
var webkit=/AppleWebKit/i.test(ua); // 蘋果、谷歌內核
var opera=/Presto/i.test(ua); // opera內核
var safari=/safari/i.test(ua) && !/Chrome/i.test(ua); // 蘋果瀏覽器
var msie=/msie/i.test(ua); // 微軟
window.device={
isMobile: mobile,
isIos: ios,
isAndroid: android,
isIPhone: iphone,
isIPad: iPad,
isWeiXin: weixin,
isChrome: chrome,
isMozilla: mozilla,
isWebkit: webkit,
isOpera: opera,
isSafari: safari,
isMsie: msie
}
})(window);
console.log(device);

結果截圖：

在網站前端開發中，瀏覽器兼容性是前端開發框架要解決的第一個問題，要解決兼容性問題就得首先準確判斷出瀏覽器的類型及其版本。

JavaScript 判斷瀏覽器類型一般有兩種辦法，一種是根據各種瀏覽器獨有的屬性來分辨，另一種是通過分析瀏覽器的 userAgent 屬性來判斷的。

在許多情況下，值判斷出瀏覽器類型之后，還需判斷瀏覽器版本才能處理兼容性問題，而判斷瀏覽器的版本一般只能通過分析瀏覽器的 userAgent 才能知道。

本文內容均屬個人原創作品，轉載此文章須附上出處及原文鏈接。

加關注，定時推送，互動精彩多，若你有更好的見解，歡迎留言探討！

斷是蘋果手機還是安卓手機，判斷是什么瀏覽器輸入網頁效果

實現javascript：

在線咨詢

上一篇：HTML+CSS之如何找BUG
下一篇：推薦12個墻裂的網站，你懂得嗎

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

用JavaScript如何來判斷是否為移動設備

您的項目需求