首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >如何使用JavaScript来判断是否为移动设备?

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

作者头像
用户5997198
发布2019-08-12 16:34:58
4.2K0
发布2019-08-12 16:34:58
举报

  由于移动设备的显示屏幕相对于桌面显示器来说小很多,在桌面显示器上能够正常显示的内容,到了移动设备中就不正常了。为了实现移动端和桌面端的相互跳转,我们可以通过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方法有:

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2018-06-22,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 蚂蚁大喇叭 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档