专栏首页蚂蚁开源社区如何使用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方法有:

本文分享自微信公众号 - 蚂蚁开源社区(mayi_zzfriend),作者:思齐大神

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-06-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 碉堡了,基于HTML5 WebGL的图像扭曲变形动画开源特效

    这是一款基于HTML5 WebGL的图像扭曲变形动画特效。该特效中,通过Three.js来制作从一幅缩略图,扭曲变形为全屏大图的动画特效,共有6种炫酷的动画效果...

    用户5997198
  • 【代码艺术】带视觉特效的js密码强度检测开源库

    这是一款带视觉特效的js密码强度检测特效。该特效在用户输入密码的时候,随着密码强度的增强,旁边的图像会越来越清晰或越来越模糊,通过图像的变化来提示用户密码的强度...

    用户5997198
  • 编程江湖中的不信任原则

    编程,是一件容易的事,也是一件不容易的事。说它容易,是因为掌握一些基本的数据类型和条件语句,就可以实现复杂的逻辑;说它不容易,是因为高性能高可用的代码,需要了解...

    用户5997198
  • nodejs学习笔记

    1、module.exports+require很好用,可以用来做全局变量,比如在a.js中require了一个js,并且修改了这个js的一个属性,然后b.js...

    黒之染
  • 怎么用Node.js创建HTTPS服务器?

    HTTPS已经无所不在,作为开发者,我们经常需要访问或者使用HTTPS服务器。本文重要介绍了如何用 Node.js 在本地创建一个HTTPS开发服务器。

    用户7261497
  • Node.js入门以及第一个helloworld程序.

    1、概念:简单的说 Node.js 就是运行在服务端的 JavaScript。学之前需要明白Node.js是无法挑战jsp、php或者asp这种老牌网站的地位的...

    JMCui
  • 首例利用智能路由网关犯罪嫌疑人被捕:罪名流量劫持

    用户1075292
  • Flutter实际开发bug总结

    1.1 安卓release包缺少libflutter.so 1.2 AndroidStudio导入项目后自动变为model,没有Flutter目录 1.3 ...

    rhyme_lph
  • Vue.js学习笔记——简介、安装使用

    Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。

    德顺
  • F.I.S初探(前端工程化)

    一、初识FIS 在做项目中遇到了静态资源浏览器缓存更新的问题,于是在网络上寻找解决方案。之前虽然没有解决过这个问题,但方法无非就是为其设定新URI使得浏览器强制...

    用户1105954

扫码关注云+社区

领取腾讯云代金券