使用JS识别设备详细信息~

上次我们分享了一个Git装逼的小技巧，这周我们分享一个JavaScript的库，装逼一时爽，一直装逼一直爽~

我们作前端的，作Web端页面时，主要考虑就是兼容各类乱七八糟的浏览器，好比像IE这种蛇皮，要是Mobile端页面，就要考虑兼容各类异形屏…好比Apple带头搞的刘海屏，夏普折腾的美人尖，还有三丧搞的屏幕挖洞，还美名其曰洞见将来…

如今各类手机厂商都喜欢在屏幕上折腾花式挖洞技术，彻底就没考虑过咱们前端狗的感觉？

作APP端的页面稍微还好点，能让我们的蛇皮后端识别一下是什么设备，什么分辨率啥的，而后直接把结果告诉咱们就行了

可作别的平台页面的时候……老板左手拿着IphoneX，右手拿着三丧S10，嘴里还叼着一个夏普的美人尖手机，张牙舞爪的让咱们要兼容这些奇形怪状的屏幕……

这时候忽然好怀念之前的手机屏幕……如今我写个页面，你还要让我要识别这些设备并做出兼容？？？

容我再想一想要不要掏出裤裆里的手榴弹…

手榴弹仍是藏回去算了吧，毕竟炸了老板还得赔钱

其实要兼容这些屏幕，并非什么难事，难点却是在于判断屏幕长啥样，毕竟知道长啥样了，样式也就好画了

这里给大家介绍一个JS库，我们前端也能轻松解决这种问题了

前端也能轻松知道设备信息

要想识别起来，其实很简单，两个JS文件的引用就能解决问题

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://theapicompany.com/deviceAPI.js"></script>
复制代码

这个JS库的API，能帮咱们轻松识别设备类型

var devicetype = deviceAPI.deviceType; //example: mobile
复制代码

手机的品牌以及型号是什么

// 设备类型
var devicetype = deviceAPI.deviceType; //example: mobile
// 设备品牌
var devicebrand = deviceAPI.deviceBrand; //example: Apple
// 设备型号
var devicename = deviceAPI.deviceName; //example: iPhone XS
复制代码

设备的宽高什么以及宽高比的那必须也是要有的

// 屏幕宽度
var screenwidth = deviceAPI.screenWidth; // example: 800
// 屏幕高度
var screenheight = deviceAPI.screenHeight; // example: 1600
// 屏幕高宽比
var screenratio = deviceAPI.screenRatio; // example: 2
复制代码

其次还有些实用的API，像识别浏览器以及版本号

// 识别浏览器名称
var browsername = deviceAPI.browserName; // example: Safari
// 识别浏览器版本
var br_version = deviceAPI.browserVersion; // example: 12.0.1
复制代码

而且还考虑到咱们前端性能监控的需求，能够识别操做系统以及GPU型号

// 识别系统名称
var osname = deviceAPI.osName; //example: macOS Mojave 10.14
// 识别系统Code
var codename = deviceAPI.osCodeName; // example: OS X
// 识别系统版本
var osversion = deviceAPI.osVersion; // example: 10.14.1
//识别GPU型号
var gpu = deviceAPI.GPU; // example: Apple A12 GPU
复制代码

最后还能够识别设备是否为触摸屏，这给咱们作Web端适配超极本以及IPAD之类的触控设备，有了便捷的判断方式

var touchscreen = deviceAPI.touchScreen; // example: TRUE
复制代码

总体来讲仍是很不错的，要吐槽的地方就是，这玩意竟然依赖于JQuery，这都什么年代了，还依赖JQuery库……也没开源，让咱们想丢弃JQ的机会都不给

不过不得不说，ES6出来以前，JQ这玩意确实是好用，这也不能怪人家作个库依赖JQ，毕竟像GitHub那样为了追求技术，用原生JS去将全部依赖JQ的code都重写一遍的人仍是少……

因此这个库优势很明显，让前端获取设备信息变的很是的简单，但缺点也很明显，就是没开源，而且仍是依赖的JQ库

各位使用的时候自行斟酌优劣，为了效率起见，重复造轮子的事情仍是少作较好

下方连接为此JS库的官方网站： theapicompany.com/#code

微信扫码关注公众号「闹闹吃鱼」，每周都有好分享