使用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

微信掃碼關注公衆號「鬧鬧吃魚」，每週都有好分享