整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

用JavaScript如何来判断是否为移动设备

用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: