PC端、手机端自动识别并跳转的JS插件devie.js_建站知识_新闻_文汇918博天堂网站官方918博天堂手机客户端
4006063061 15628812133

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

建站知识   点击量:0次   2018-09-08 16:26

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

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

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

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

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

<script src="https://cdn.bootcss.com/device.js/0.2.7/device.min.js"></script>

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

<script> 
var isMobile = device.mobile(),识别是否为移动设备  
 if(isMobile)
 {  window.open("https://m.cnwenhui.cn","_self");    } 
 </script>

这段代码需要增加至PC版本的页面中,如果终端为移动设备,则自动跳转至对应的移动版本918博天堂手机客户端中,如果不为移动端设备则不跳转。

<script>
 var isPc = device.desktop(),识别是否为移动设备    
 if(isPc)
 {        window.open("https://www.cnwenhui.cn","_self");    } 
 </script>

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

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

< 返回列表

相关案例更多

其他资料更多

扫描二维码关注我们:918博天堂网站918博天堂网站有限公司
确 认
<友情连结> 济南918博天堂手机客户端建设918博天堂手机客户端公司/ 济南行知信息科技有限公司/ 济南搜到网络科技有限公司/ 中国华文教育网-广西华侨学校/ 广西华侨学校/