上次咱们分享了一个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库的官方网站： https://theapicompany.com/#code

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