JavaScript 檢測瀏覽器和操作系統

斷瀏覽器的方法:

第一種方法:

<script type="text/javascript">
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
var s;
(s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
(s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
(s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
(s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
(s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
//以下進行測試
if (Sys.ie) document.write('IE: ' + Sys.ie);
if (Sys.firefox) document.write('Firefox: ' + Sys.firefox);
if (Sys.chrome) document.write('Chrome: ' + Sys.chrome);
if (Sys.opera) document.write('Opera: ' + Sys.opera);
if (Sys.safari) document.write('Safari: ' + Sys.safari);
</script>

第二種方法:

讀原文：【技術分享】瀏覽器檢測之趣事

點擊關注“八戒技術團隊”，閱讀更多技術干貨

那段歷史

在開發過程中，我們通常用用戶代理字符串—瀏覽器端 window.navigator.userAgent或者服務器端header攜帶的user-agent —來用于檢測當前瀏覽器是否為移動端，比如：

if(isMobile()) {
  // 移動端邏輯...
}


function isMobile () {
    const versions = (function () {
        const u = window.navigator.userAgent // 服務器端：req.header('user-agent')
        return {
          trident: u.indexOf('Trident') > -1, // IE內核
          presto: u.indexOf('Presto') > -1, // opera內核
          webKit: u.indexOf('AppleWebKit') > -1, // 蘋果、谷歌內核
          gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') === -1, // 火狐內核
          mobile: !!u.match(/AppleWebKit.*Mobile.*/), // 是否為移動終端
          ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // ios終端
          android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, // android終端或者uc瀏覽器
          iPhone: u.indexOf('iPhone') > -1, // 是否為iPhone或者QQHD瀏覽器
          iPad: u.indexOf('iPad') > -1, // 是否iPad
          webApp: u.indexOf('Safari') === -1
       }
    }())
    return versions.mobile || versions.ios || versions.android || versions.iPhone || versions.iPad
}

我在使用時心里一直有疑問，一個移動端，為什么要做那么多判斷呢？

目前我的 Chrome 瀏覽器：

看到這么一長串字符串，我表示更懵逼， Mozilla不是firefox的廠商么？這是 Chrome 瀏覽器，又怎么會有 “Safari” 的關鍵字？那個 “like Gecko” 又是什么鬼？

于是抱著這些疑問，我打算好好深入了解一下瀏覽器檢測這部分，沒想到在學習過程中發現了挺有意思的事情，待我慢慢道來，大家也聽個樂呵。

首先始于客戶端與服務器端通信，要求攜帶名稱與版本信息，于是服務器端與客戶端協定好在每個HTTP請求的頭部加上用戶代理字符串(userAgent)，方便服務器端進行檢測，檢測通過之后再進行后續操作。

早期的用戶代理字符串(userAgent)很簡單，就 "產品名稱/產品版本號"，比如："Mosaic/0.9"。93年之后，網景公司發布的Netscape Navigator 系列瀏覽器漸漸成為了當時最受歡迎的瀏覽器，于是它擁有了規則制定權，說從此以后我的用戶代理字符串就為：

這時肯定有人會問，"Mozilla" 是網景公司為 Netscape 瀏覽器定義的代號，既然站在“食物鏈”頂端，那當然得用自己的命名，這能理解。可為啥直到現在，大部分主流瀏覽器的用戶代理字符串(userAgent)，第一個名稱也是 “Mozilla” 呢？

這就是我即將要講的，第一根攪屎棍——微軟。

96年，微軟推出了 IE3, 而當時 Netscape Navigator3 的市場占有率太高，微軟說，為了兼容 Netscape Navigator3， IE的用戶代理字符串從此就為：

看到沒有，第一個名稱還是 “Mozilla”，這個誤導信息可以直接騙過服務器檢測，而真正的 IE 版本放到后面去了。

大概意思就是初出茅廬的IE小同學怕自己知名度太低，萬一服務端檢測不到自己，用戶流失了怎么辦？隔壁老大哥家大業大，那就干脆去蹭波流量吧。關鍵是蹭流量就蹭流量吧，還嘴硬說我這可是Mozilla/2.0哦，不是Mozilla/3.0哦，跟那個Netscape Navigator3 不能說沒有關系，只能說毫不相干。于是，IE成功地將自己偽裝成了 Netscape Navigator。

這在當時來說是有爭議，但不得不說，微軟這波操作相當精準。精準到直到97年 IE4 發布時，IE 的市場份額大幅增加，有了點話語權，也不藏著掖著了，就跟 Netscape 同時將版本升級到了 Mozilla/4.0，之后就一直保持同步了。

看到 IE 這波操作，場外觀眾有點坐不住了，更多的瀏覽器廠商沿著IE的老路，蹭著 Netscape 的流量，在此基礎上依葫蘆畫瓢地設定自己的用戶代理字符串(userAgent)。直到 Gecko 渲染引擎 (firefox的核心) 開始大流行，用戶代理字符串(userAgent)基本已經形成了一個比較標準格式，服務端檢測也能識別到 “Mozilla”、“Geoko” 等關鍵字，與之前字符串相比，還增加了引擎、語言信息等等。

接下來我要說第二根攪屎棍——蘋果。

2003年，蘋果發布了 Safari, 它說，我的瀏覽器用戶代理字符串是這樣的：

Safari 用的渲染引擎是WebKit, 不是Gecko，它的核心是在渲染引擎KHTML基礎上進行開發的，但是當時大部分瀏覽器的用戶代理字符串(userAgent)都包含了 “Mozilla”、“Gecko”等關鍵字供服務器端檢測。

蘋果昂著臉，維持著表面的高傲，表示我的 WebKit 天下無敵、傲視群雄，心里卻顫顫發抖，小心翼翼地在用戶代理字符串里加了個“like Gecko”，假裝我是Gecko ？！

這波操作可謂是又當又立的典范！

我想可能心理陰影最大的要屬 Netscape 了，本來 IE 來白嫖一波也就算了，你Safari 也要來，而且本身蘋果的影響力就不容小覷，你再進來插一腳，讓我以后怎么生存？但蘋果說：“Safari 與 Mozilla 兼容，不能讓網站以為用戶使用了不受支持的瀏覽器而把 Safari 排斥在外。”大概意思是，我就是要白嫖，怎么樣？可以說是相當不要臉了。

不過至少蘋果還有點藏著掖著，而 Chrome 就有點不講武德，它說，成年人的世界不做選擇，我想要的我都要：

Chrome 的渲染引擎是 Blink , Javascript引擎是 V8，但它的用戶代理字符串(userAgent)中，不僅包含了“Mozilla”、“like Gecko”，還包含了 “WebKit” 的引擎信息，幾乎把能嫖的都嫖了，只多了一個 “Chrome” 名稱和版本號，甚至都沒有一個 “Blink” 關鍵字，節操碎了一地，簡直觸目驚心，令人嘆為觀止。

到這里就不得不提一嘴高冷的Opera，直到Opera 8，用戶代理字符串(userAgent)一直都是 “Opera/Version (OS-or-CPU; Encryption [; language])”

Opera 一直給人一種世人皆醉我獨清、出淤泥而不染的氣概。到直到 Opera9 畫風突然變了，估計也是看到幾個大廠商各種騷操作，有點繃不住了，也跑去蹭流量。心態雖然崩但高冷人設不能崩，我就是不走尋常路，于是秀了一波玄學操作，它搞了兩套用戶代理字符串(userAgent)：

場外觀眾表示有點看不懂，蹭完 Firefox 又去蹭 IE，還得分開蹭，這哪是秀操作，這可是秀智商啊！縱觀瀏覽器發展的這幾十年，大概就是長江后浪推前浪，后浪還沒把前浪踩死在沙灘上，后后浪又踩過來的一段歷史吧。就在這歷史的溪流中，用戶代理字符串(userAgent)也已經形成了一個比較標準的格式。

目前，各個瀏覽器的用戶代理字符串(userAgent)始終包含著以下信息：

至于后來移動端的 IOS 和 Andriod 基本的格式就成了：

這里的Mobile可能是 “iphone”、“ipad”、“BlackBerry”等等，Andriod設備的OS-or-CPU通常都是“Andriod”或“Linux”。所以，回到開頭的isMobile檢測函數內部，一大堆的檢測判斷條件，簡直就是一粒粒歷史塵埃的堆疊。

同時，本地Chrome瀏覽器輸出：

我也可以翻譯一下，大概意思就是，白嫖的Mozilla/5.0 + Macintosh平臺 + Mac OS操作系統 × 10_15_7版本白嫖的AppleWebKit引擎/537.36引擎版本號 (KHTML內核， like Gecko 假裝我是Gecko) Chrome瀏覽器/瀏覽器版本號99.0.4844.84 白嫖的Safari/Sarari版本號537.36。

本人表示很精彩，一個用戶代理字符串猶如看了一場轟轟烈烈(巨不要臉)、你掙我奪(你蹭我蹭)的大戲！

第三方插件

接下來，為懶人推薦幾款用于瀏覽器檢測的省事的第三方插件。

1、如果只是檢測設備是否為手機端，可以用 isMobile ，它支持在node端或瀏覽器端使用。

地址：https://github.com/kaimallea/isMobile

2、如果要檢測設備的類型、版本、CPU等信息，可以用 UAParser ，它支持在node端或瀏覽器端使用。

地址：https://github.com/faisalman/ua-parser-js

3、vue插件，vue-browser-detect-plugin

地址：https://github.com/ICJIA/vue-browser-detect-plugin

4、react插件，react-device-detect

地址：https://github.com/duskload/react-device-detect

5、在不同平臺，要在Html中設置對應平臺的CSS，可以用 current-device

地址：https://github.com/matthewhudson/current-device

需要注意的是，第三方插件雖好用，但也要注意安全問題哦，之前 UAParser 就被曝出被遭遇惡意投毒，所以只是簡單的檢測盡量手寫。

移動端與PC端分流

移動端與PC端分流，可以用 nginx 來操作， nginx 可以通過 $http_user_agent 直接拿到用戶代理信息：

http { 
  server {
      listen 80;
        server_name localhost;
        location / {
           root /usr/share/nginx/pc; #pc端代碼目錄
           if ($http_user_agent ~* '(Android|webOS|iPhone|iPod|BlackBerry)') {
            root /usr/share/nginx/mobile; #移動端代碼目錄
           }
       index index.html;
        }
  }
}

希望以上內容能對有需要的人有所幫助

歡迎大家留言寫下自己希望了解的技術方向

歡迎大家一起探討交流

介：給出了網絡上一些基本的非接觸交流電壓檢測電路。在第二部分進行分析了基于電容耦合下的原理分析。這對于一些網絡上基于電磁感應方面的解釋更接近于實際情況。
關鍵詞： 電壓檢測，AC，非接觸

01 交流電壓檢測

??交流電壓檢測可以在電氣維護的時候，不需要直接接觸操作對象便可檢測上面所攜帶者交流電壓。在 是漏電，還是電磁輻射？[1] 中現實了有人利用無接觸交流電壓檢測器充電器所帶來的的高壓檢測結果。本文總結一些交流電壓檢測電路圖。

一、雙極性三極管

??這類是由雙極型三極管組成達林頓晶體管的結構，對于感應的交流電流進行整流放大之后驅動顯示電路。

1、基于三個2N3904

電路來自于 How to make AC Tester | Mains Voltage Detector Circuit | DIY[2] ：介紹了基于3個晶體管的無接觸電壓檢測器。

??下面電路中的晶體管可以使用 2N2222， BC547-C替代。

▲ 圖1.1.1 檢測電路圖

▲ 圖1.1.2 組裝之后的電路并進行測試

??下面兩個是來自于 Non[3] 的兩個檢測電路實物示意圖。

▲ 圖1.1.3 另外一個組裝后的示意圖

▲ 圖1.1.4 帶有只是LED和聲音的檢測電路

??在 Non[4] 給出了建立的實物示意圖。

▲ 圖1.1.5 電路組裝示意圖

▲ 圖1.1.6 三個集體管的電壓檢測電路

??在 Non Contact AC Voltage Detector Circuit Diagram[5] 給出了另外的制作過程。

▲ 圖1.1.7 組裝在一起的緊湊檢測電路圖

▲ 圖1.1.8 測試電路基本功能

二、基于MOS晶體管

1、2N3819+555

??在博文 Non Contact AC Voltage Detector using 2N3819 MOSFET[6] 介紹了基于MOSFET 2N3819的非接觸的交流電壓檢測電路。

▲ 圖1.2.1 Non Contact AC Voltage Detetor

【21. 電路中的元器件參數】

S.no Component Value Quantity 1 Input Supply DC 6-12V 1 2 Antenna 2-4 inches 1 3 Field-effect transistor 2N3819 1 4 IC NE555 1 5 Resistor 1MΩ 10KΩ 470Ω 1 2 1 6 Electrolytic Capacitor 10μF 1 7 Ceramic Capacitor 0.01μF 1 8 LED – 1 9 Buzzer – 1

▲ 圖1.2.2 測試電路圖的詳細電路圖

三、基于變壓器

1、變壓器+耳機

??在 Sensitive Voltage Detector[7] 給出了基于音頻變壓的電壓檢測。可以檢測到0.1uA 的交流電流。

▲ 圖1.3.1 檢測電路圖

四、基于IC電路

1、IC4060

??在 Non-Contact Voltage Detector Circuits Using Transistors and IC[4] 中給出了基于IC4060的非接觸AC 電壓檢測電路圖。

▲ 圖1.4.1 基于IC4060的檢測電路

2、555

??在 How to Make AC Voltage Detector[8] 給出了基于555的電路圖。

▲ 圖1.4.2 電路原理圖

02 檢測原理

??在 Non-contact voltage detector assignment[9] 介紹了非接觸交流電壓檢測器的基本原理。

▲ 圖2.1 操作機理分析示意圖

▲ 圖2.2 非接觸AC電壓檢測原理分析

▲ 圖2.3 非接觸AC電壓檢測分析

參考資料

[1]

是漏電，還是電磁輻射？: https://zhuoqing.blog.csdn.net/article/details/120745453

[2]

How to make AC Tester | Mains Voltage Detector Circuit | DIY: https://nematicslab.com/how-to-make-ac-tester-mains-voltage-detector-circuit-diy/

[3]

Non: https://makingcircuits.com/blog/non-contact-voltage-detector-circuits-using-transistors-and-ic/

[4]

Non: https://forum.chumbaka.asia/blog/2018/04/30/learn-voltage-detector/

[5]

Non Contact AC Voltage Detector Circuit Diagram: https://circuitbest.com/non-contact-ac-voltage-detector-circuit/

[6]

Non Contact AC Voltage Detector using 2N3819 MOSFET: https://circuits-diy.com/non-contact-ac-voltage-detector-using-2n3819-mosfet/

[7]

Sensitive Voltage Detector: https://www.allaboutcircuits.com/textbook/experiments/chpt-3/sensitive-voltage-detector/

[8]

How to Make AC Voltage Detector: https://www.growamis.com/how-to-make-ac-voltage-detector/

[9]

Non-contact voltage detector assignment: https://aaronscher.com/RF_wireless_EM/Non_contact_voltage_detector_assignment/Assignment.html

在線咨詢

上一篇：前端 - CSS 學習全部24種Viewports
下一篇：HTML中button標簽點擊實現頁面跳轉的三種方法

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商