咨询电话:
15628812133
08
2018/09

PC端、手机端自动识别并跳转的JS插件devie.js

发布时间:2018-09-08 16:26:21
发布者:xueye
浏览量:
0

现在移动端的流行及流量占比越来越高,我们的很多客户在做网站的时候都希望我们附带把移动网站一并做出来,那么就会遇到一些问题,比如给客户发的是移动版网址,但是客户从电脑端打开的,或者是给客户发的电脑端网址客户从移动端打开的,都会导致比例变形或无法做到完美展现的情况。

乾乙小儿推拿识别案例.jpg

当然以上问题在我们文汇软件的项目中是不存在的,我们现在识别移动端有三种方法,一种是通过PHP语言来进行识别终端,然后根据终端设备匹配对应规则展现对应版本网站;第二种是通过web服务器来进行终端识别,我们的web服务器一般为apache和nginx,也是可以完美识别终端的;以上两种方法技术难度较高,一般不容易掌握,我们本文介绍的就是通过前端来进行终端的识别。

我们本文中介绍的device.js,是一个可以用来检测设备的平台、操作系统和方向的JavaScript库,device可以判断操作系统比如 iOS,安卓,黑莓,Windows,Firefox OX,判断屏幕的方向横屏或者竖屏,属于移动设备还是平板设备,是一个功能比较齐全的JavaScript库。

下面我们来举例说明这个device的用法,首先需要在页面中引用以下代码,将device加载至html中。

如果我们需要判断当前打开的页面是否为移动端我们需要如下写法

这段代码需要增加至PC版本的页面中,如果终端为移动设备,则自动跳转至对应的移动版本网站中,如果不为移动端设备则不跳转。

这段代码需要增加至移动版本的页面中,如果终端为PC设备,则自动跳转至PC版本网站中,否则不跳转。其实就是这么简单的操作即可完成对应的识别,除此之外还可以判断平板设备,或操作系统均可,下面简单列举了一些可判断识别的参数,供大家在使用时借鉴。

**Device**       **JavaScript Method**

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()

关键词:
返回列表