通过JS检测当前设备类型

背景:

基友做了个APP,发了一排二维码,然后互相吐槽了一下,发现移动应用出现也一年了,虽然很简单,但是好像都懒得通过写个JS来判断然后发一个二维码让大家下载应用。虽然内容不多,而且没啥难度,但是动嘴不如动手,总要有人做,就专门整理一下。

简介:

提供了几个JS接口,通过这几个JS接口,可以轻松获取到当前打开页面的浏览器类型,然后根据类型跳转到对应的链接。同时也提供了两个demo方便大家参考。

对应链接:http://microdemo.bihe0832.com/MultiQrcode/index.html

对应github地址:https://github.com/bihe0832/MultiQrcode

Demo:

Demo1 :

Demo1详细展示了各种设备下的页面跳转(PC和各种移动设备))。不会换起下载,只会打开各种页面。详细的跳转代码参见目录下jump.html

对应链接:http://microdemo.bihe0832.com/MultiQrcode/Demo1/jump.html

Demo2:

Demo2提供了常见应用下载的二维码的方式中,提供一个二维码支持各种平台下载。详细的跳转代码参见目录下download.html

对应链接:http://microdemo.bihe0832.com/MultiQrcode/Demo2/download.html

Tools:

Tools提供了获取是否是移动设备,获取系统,设备类型的各种函数的调用效果。详细的跳转代码参见根目录下tools.html.

对应链接:http://microdemo.bihe0832.com/MultiQrcode/tools.html

实现原理:

利用浏览的navigator中的platform字段和userAgent字段来区分请求来源。

提供接口:

ZixieJS.browser.isPc

  • 功能:判断平台是不是PC
  • 参数:无
  • 返回值:是否为PC设备

ZixieJS.browser.getDevices

  • 功能:判断设备类型
  • 参数:无
  • 返回值:ZixieJS.browser.devices

ZixieJS.browser.getSuperAPP

  • 功能:判断是否为超级app
  • 参数:无
  • 返回值:ZixieJS.browser.app

ZixieJS.browser.getOSDetail

  • 功能:获取具体的PC 操作系统类型和版本号
  • 参数:无
  • 返回值:ZixieJS.browser.OS

ZixieJS.browser.getOS

  • 功能:获取PC系统类型
  • 参数:无
  • 返回值:ZixieJS.browser.OS

代码结构:

 — Demo1: Demo1相关代码
 	- jump.html: Demo1核心代码
 — Demo2: Demo2相关代码
 	- download.html: Demo2核心代码
 — index.html:Demo首页
 — res:页面相关资源
 	- brower.js :核心代码
 — tools.html:JS调用的整体事例。

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏开源优测

性能测试必备监控技能jvm之jdk命令行工具篇16

前言 对于JVM的性能监控,主要注意以下关键参数,通过jdk自带的命令行工具,即可查看相关参数,从而分析系统或目标服务程序中存在的性能瓶颈 jps JVM Pr...

315120
来自专栏专注数据中心高性能网络技术研发

linux查看系统信息

---- 1.uname uname命令用于打印当前系统相关信息(内核版本号、硬件架构、主机名称和操作系统类型等) -a或--all:显示全部的信息; -m或-...

38950
来自专栏智能计算时代

Envoy 架构概览(1):术语,线程模型,监听器和网络(L3 / L4)过滤器和HTTP连接管理

术语 在我们深入到主要的体系结构文档之前,有一些定义。有些定义在行业中有些争议,但是它们是Envoy在整个文档和代码库中如何使用它们的,因此很快就会出现。 主机...

37530
来自专栏西枫里博客

使用IP138读取用户端地址写入数据库函数

最近突然发现本...

10220
来自专栏决胜机器学习

《Redis设计与实现》读书笔记(三十六) ——Redis 慢查询日志实现

《Redis设计与实现》读书笔记(三十六) ——Redis 慢查询日志实现 (原创内容,转载请注明来源,谢谢) 一、基本功能 redis的慢查询日志,用于记录执...

34540
来自专栏北京马哥教育

[干货]varnish原理|杨过同学

Varnish是一款高性能的开源HTTP加速器(其实就是带缓存的反向代理服务),可以把http响应内容缓存到内存或文件中,从而提高web服务器响应速度。与传统的...

33660
来自专栏MYSQL轻松学

你了解的max_allowed_packet

Error updating database. Cause: com.mysql.jdbc.MysqlDataTruncation: Data trun...

60370
来自专栏wannshan(javaer,RPC)

dubbo路由机制分析2(路由设置存储)

接上次 https://cloud.tencent.com/developer/article/1109552 目前dubbo支持的路由类型分三种condito...

38140
来自专栏源哥的专栏

客户端数据集/服务端数据集的原理和设计

最近在开发一个比较大型的项目,主要采用Activex控件做底层操作,采用Javascript做逻辑控制和处理,采用Ajax实现服务端与客户端之间的交互,而在实际...

9340
来自专栏木可大大

Linux监控指令

说到监控CPU,目前主要是监控CPU的使用率,以及每一个进程占用CPU资源,Linux系统中主要使用 top、vmstat、pstree 三个命令。

19130

扫码关注云+社区

领取腾讯云代金券