当前位置主页 > 资料库 > 前端教程 > 如何使用JavaScript来判断是否为移动设备

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

2017-05-22

由于移动设备的显示屏幕相对于桌面显示器来说小很多,在桌面显示器上能够正常显示的内容,到了移动设备中就不正常了。为了实现移动端和桌面端的相互跳转,我们可以通过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
在iphone中使用device.js
在Android平板中使用device.js
在Android平板中使用device.js
在蓝莓系统中使用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类对应的设备如下表所示:

设备名称 class类
iPad ios ipad tablet
iPhone ios iphone mobile
iPod ios ipod mobile
Android Phone android mobile
Android Tablet android tablet
BlackBerry Phone blackberry mobile
BlackBerry Tablet blackberry tablet
Windows Phone windows mobile
Windows Tablet windows tablet
Firefox OS Phone fxos mobile
Firefox OS Tablet fxos tablet
MeeGo meego
Desktop desktop
Television television

根据当前设备屏幕是横向还是纵向的,device.js会在<html>元素中插入相应的class类。

设备方向 class类
Landscape landscape
Portrait portrait

另外,device.js还提供了一组用于判断设备的js方法,使用方法如下:

if(device.mobile()){
    //执行移动设备的方法
}

所有可用的判断方法如下表所示:

设备名称 JavaScript 方法
Mobile device.mobile()
Tablet device.tablet()
Desktop device.desktop()
iOS device.ios()
iPad device.ipad()
iPhone device.iphone()
iPod device.ipod()
Android device.android()
Android Phone device.androidPhone()
Android Tablet device.androidTablet()
BlackBerry device.blackberry()
BlackBerry Phone device.blackberryPhone()
BlackBerry Tablet device.blackberryTablet()
Windows device.windows()
Windows Phone device.windowsPhone()
Windows Tablet device.windowsTablet()
Firefox OS device.fxos()
Firefox OS Phone device.fxosPhone()
Firefox OS Tablet device.fxosTablet()
MeeGo device.meego()
Television device.television()

判断设备方向的js方法有:

设备方向 JavaScript方法
Landscape device.landscape()
Portrait device.portrait()
Previous:
上一篇:了解JavaScript Web Animations API
Next:
下一篇:通过jquery验证Email表单

我要评论

返回顶部