問題
問題描述
今天在做項(xiàng)目的時(shí)候，QA部門提了一個(gè)Bug，在一個(gè)搜索列表中，搜索欄為空時(shí)刷新頁面，卻觸發(fā)了搜索功能，并且列表顯示出<未搜索到結(jié)果>

環(huán)境
IE11

問題原因
QA的IE11用戶代理字符串使用了老版本，導(dǎo)致表單提交時(shí)，把搜索框中的屬性值placeholder字段傳入了后推斷。
導(dǎo)致搜索條件為<請輸入>
placeholder屬性在IE中，只有 IE11 支持
簡介
只有IE瀏覽器中才會有“瀏覽器模式”和“文檔模式”，兼容性視圖涉及兩個(gè)重要的功能便是“瀏覽器模式【browser mode】”和“文檔模式【document mode】”，在IE中按F12鍵，打開“開發(fā)人員工具”，在菜單欄中可以看到“瀏覽器模式”和“文檔模式”的切換菜單，其中可以選擇切換到IE7/8等不同的網(wǎng)頁模式。這個(gè)設(shè)置之后在js中可以通過navigator.userAgent獲得瀏覽器的版本，這個(gè)一般情況是與瀏覽器模式對應(yīng)的，也可以通過Document.documentMode獲得瀏覽器的文檔模式，這個(gè)一般是與文檔模式相對應(yīng)的。如果瀏覽器模式與文檔模式不一致的時(shí)候，我們一般認(rèn)為還是以文檔模式為準(zhǔn)【渲染頁面】。

<瀏覽器模式>和<文檔模式>之間有什么區(qū)別呢？
“瀏覽器模式”用于切換IE針對該網(wǎng)頁的默認(rèn)文檔模式、對不同版本瀏覽器的條件備注解析、發(fā)送給網(wǎng)站服務(wù)器的用戶代理(User-Agent)字符串的值。網(wǎng)站可以根據(jù)瀏覽器返回的不同用戶代理字符串判斷瀏覽器的版本和安裝的功能，這樣就可以向不同的瀏覽器返回不同的頁面內(nèi)容。用開發(fā)人員工具切換瀏覽器模式時(shí)，文檔模式也會對應(yīng)改變。

默認(rèn)情況下，IE8的瀏覽器模式為IE8。用戶可以通過單擊地址欄旁邊的兼容性視圖按鈕來手動切換到不同的瀏覽器模式。在IE8中，IE8兼容性視圖會以IE7文檔模式來顯示網(wǎng)頁，同時(shí)會向服務(wù)器發(fā)送IE7的用戶代理字符串。

“文檔模式”用于指定IE的頁面排版引擎(Trident)以哪個(gè)版本的方式來解析并渲染網(wǎng)頁代碼。切換文檔模式會導(dǎo)致網(wǎng)頁被刷新，但不會更改用戶代理字符串中的版本號，也不會從服務(wù)器重新下載網(wǎng)頁。切換瀏覽器模式的同時(shí)，瀏覽器也會自動切換到相應(yīng)的文檔模式。這個(gè)就是指定文檔模式為IE7，Trident會按照IE7模式去渲染頁面元素。

另外還有不同的，就是IE=7和IE=EmulateIE7，這兩個(gè)有什么不同呢？IE=7是頁面按照IE7去渲染，不考慮DocType，而IE=EmulateIE7是以兼容IE7的模式去渲染，考慮DocType。當(dāng)然還有更例外的情況，就是真正的IE7與IE9下添加了也有不同的情況，前幾天做瀏覽器兼容的時(shí)候就碰到過，那個(gè)只能到IE7瀏覽器下去調(diào)試了，并且要分析代碼的邏輯。

瀏覽器的用戶代理字符串 ———–
每個(gè)瀏覽器都有它自己的用戶代理(user agent)字符串，里面包含了瀏覽器和操作系統(tǒng)等信息。通過使用這個(gè)字符串，我們可以處理跨瀏覽器的差異。用戶代理字符串保存在 JavaScript 的 navigator.userAgent 變量中。我們先來看看各個(gè)主流瀏覽器在各個(gè)平臺的用戶代理字符串的例子。

1. IE 和 IE Mobile 瀏覽器
系統(tǒng)平臺 瀏覽器 用戶代理字符串
Windows IE 9 Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)
Windows IE 10 Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0)
Windows IE 11 Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko
Windows Phone IE 10 Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; NOKIA; Lumia 920)
2. Firefox 和 Firefox Mobile 瀏覽器
系統(tǒng)平臺 用戶代理字符串
Windows Mozilla/5.0 (Windows NT 6.1; WOW64; rv:6.0.2) Gecko/20100101 Firefox/6.0.2
Android Mozilla/5.0 (Android; Mobile; rv:18.0) Gecko/18.0 Firefox/18.0
3. Opera 和 Opera Mobile 瀏覽器
在 Opera 12 及之前，使用的是 Presto 渲染引擎，它的 UA 字符串為：

系統(tǒng)平臺 用戶代理字符串
Windows Opera/9.80 (Windows NT 6.1; WOW64) Presto/2.12.388 Version/12.12
Android Opera/9.80 (Android 2.3.4; Linux; Opera Mobi/ADR-1301071546) Presto/2.11.355 Version/12.10
而從 Opera 14 開始，它改用 Chrome 的 WebKit/Blink 渲染引擎，UA 字符串改變?yōu)?#xff1a;

系統(tǒng)平臺 用戶代理字符串
Windows Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0 Safari/537.36 OPR/15.0
Android Mozilla/5.0 (Linux; Android 4.1.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0 Mobile Safari/537.36 OPR/16.0
4. Chrome 和 Chrome Mobile 瀏覽器
系統(tǒng)平臺 用戶代理字符串
Windows Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.17 (KHTML, like Gecko) Chrome/24.0.1312.57 Safari/537.17
Android Phone Mozilla/5.0 (Linux; Android 4.0.4; Galaxy Nexus Build/IMM76B) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.133 Mobile Safari/535.19
Android Tablet Mozilla/5.0 (Linux; Android 4.2; Nexus 7 Build/JOP40C) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Safari/535.19
Chrome OS Mozilla/5.0 (X11; CrOS armv7l 3428.193.0) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.126 Safari/537.22
iPhone* Mozilla/5.0 (iPhone; CPU iPhone OS 6_0_2 like Mac OS X; en-us) AppleWebKit/536.26 (KHTML, like Gecko) CriOS/23.0.1271.100 Mobile/10A551 Safari/8536.25
iPad* Mozilla/5.0 (iPad; CPU OS 5_1_1 like Mac OS X; zh-cn) AppleWebKit/534.46 (KHTML, like Gecko) CriOS/23.0.1271.100 Mobile/9B206 Safari/7534.48.3
注意?Chrome for iOS 聲稱它是 CriOS。這是由于它只能使用 iOS 的 UIWebView 提供的網(wǎng)頁渲染和腳本解釋引擎，和 Chrome for Android 差別很大，而更加像 Safari for iOS。

5. Safari 和 Safari Mobile 瀏覽器
系統(tǒng)平臺 用戶代理字符串
Windows Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.57.2 (KHTML, like Gecko) Version/5.1.7 Safari/534.57.2
Macintosh Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/534.53.11 (KHTML, like Gecko) Version/5.1.3 Safari/534.53.10
iPhone Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8A293 Safari/6531.22.7
iPad Mozilla/5.0 (iPad; CPU OS 5_1_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B206 Safari/7534.48.3
Android* Mozilla/5.0 (Linux; U; Android 2.3.4; zh-cn; SonyEricssonMT15i Build/4.0.2.A.0.62) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
Mozilla/5.0 (Linux; U; Android 4.1.1; zh-cn; M040 Build/JRO03H) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30
這里的 Safari for Android 指的是 Android 自帶的瀏覽器；從用戶代理字符串看，不論 Android 的版本，它都聲稱是 Safari Mobile 4.0。實(shí)際上它和 Chrome 一樣也是從 Chromium 中移植出來的。

這里順便整理并記錄各版本 iOS 系統(tǒng)自帶的 Safari Mobile 瀏覽器的版本，如下：

iPhone OS 1.0 iPhone OS 2.0 iPhone OS 3.0 iOS 4.0 iOS 4.3 iOS 5.0 iOS 6.0
Safari 3.0 Safari 3.1 Safari 4.0 Safari 4.0 Safari 5.0 Safari 5.1 Safari 6.0?
6. 國內(nèi)的各個(gè)瀏覽器
國內(nèi)也有好幾個(gè)基于 WebKit 內(nèi)核的瀏覽器(IE 內(nèi)核的這里不討論)，它們的 user agent 字符串如下面的例子：

瀏覽器 用戶代理字符串
傲游桌面瀏覽器 Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN) AppleWebKit/533.9 (KHTML, like Gecko) Maxthon/3.0 Safari/533.9
傲游移動瀏覽器 Mozilla/5.0 (Linux; U; Android 2.3.4; zh-cn; MT15i Build/4.0.2.A.0.62) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1 Maxthon/4.0.3.3000
搜狗瀏覽器 Mozilla/5.0 (Windows NT 6.1) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/14.0.802.30 Safari/535.1 SE 2.X MetaSr 1.0
百度桌面瀏覽器 Mozilla/5.0 (Windows NT 5.1) AppleWebKit/534.7 (KHTML, like Gecko) Safari/534.7 Chrome/7.0 baidubrowser/1.x?
百度移動瀏覽器 手機(jī) UA：Mozilla/5.0 (Linux; U; Android 2.3.4; zh-cn; MT15i Build/4.0.2.A.0.62) AppleWebKit/533.1 (KHTML, like Gecko) FlyFlow/2.4 Version/4.0 Mobile Safari/533.1 baidubrowser/042_1.8.4.2_diordna_458_084/nosscirE-ynoS_01_4.3.2_i51TM/1000464b/174FA38EF54F67DF0EBC472658BA862B%7C101931900307210/1
電腦 UA：Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN) AppleWebKit/531.1 (KHTML, like Gecko) FlyFlow/2.4 Version/5.0 Safari/531.1 baidubrowser/042_1.8.4.2_diordna_458_084/nosscirE-ynoS_01_4.3.2_i51TM/1000464b/174FA38EF54F67DF0EBC472658BA862B%7C101931900307210/1
360 極速瀏覽器 Mozilla/5.0 (Windows NT 5.1) AppleWebKit/535.1 (KHTML, like Gecko) Safari/535.1 Chrome/14.0.835.202 360EE
360 移動瀏覽器 Mozilla/5.0 (Linux; U; Android 2.3.4; zh-cn; MT15i Build/4.0.2.A.0.62) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1; 360browser(securitypay,securityinstalled); 360 Aphone Browser (3.2.1)
QQ 桌面瀏覽器 Mozilla/5.0 (Windows NT 6.1) AppleWebKit/534.36 (KHTML, like Gecko) Chrome/12.0.742.53 Safari/534.36 QQBrowser/6.5.9225.201
QQ 移動瀏覽器 中轉(zhuǎn)瀏覽：MQQBrowser/2.9/Adr (Linux; U; 2.3.4; zh-cn; MT15i Build/4.0.2.A.0.62;480*854)
直接瀏覽：MQQBrowser/2.9/Mozilla/5.0 (Linux; U; Android 2.3.4; zh-cn; MT15i Build/4.0.2.A.0.62) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
直接瀏覽：Mozilla/5.0 (iPad; U; CPU OS 4_3_5 like Mac OS X; zh-cn) AppleWebKit/533.17.9 (KHTML, like Gecko) MQQBrowser/3.1 Mobile/8L1 Safari/7534.48.3
UC 瀏覽器 Mozilla/5.0 (Linux; U; Android 2.3.4; zh-cn; MT15i Build/4.0.2.A.0.62) UC AppleWebKit/530+ (KHTML, like Gecko) Mobile Safari/530
可以看到大部分瀏覽器都兼容 Safari 或 Chrome 的 UA 字符串。但是還是有很多胡亂使用的地方。比如 UC 瀏覽器比較古怪(在 UC 8.2 for Android 2.3 中測試)：在 user agent 中竟然不包含自己的版本號。

7.?navigator.platform
如果需要檢測用戶使用的操作系統(tǒng)，除了 navigator.userAgent 之外也可以用 navigator.platform。例如：

?
var platform = (function() {
??var pl = navigator.platform;
??if (pl.indexOf('Win') == 0) {
????return 'windows';
??} else if (pl.indexOf('Mac') == 0) {
????return 'macos';
??} else if (pl.indexOf('Linux') == 0 || pl.indexOf('X11') == 0) {
????return 'linux';
??} else if (pl.indexOf('iPhone') == 0 || pl.indexOf('iPad') == 0) {
????return 'ios';
??} else if (pl.indexOf('Android') == 0) {
????return 'android';
??} else {
????return 'unknown';
??}
})();
但是用?navigator.platform 判斷是否 Android 并不可靠。在一臺 Android 2.3 手機(jī)上測試，發(fā)現(xiàn)只有 Opera Mobile 給出 “Android” 的結(jié)果，Android browser 和 Firefox Mobile 都給出 “Linux armv7l”。
---------------------
作者：Sunny_Ran
來源：CSDN
原文：https://blog.csdn.net/sunny_ran/article/details/79321879
版權(quán)聲明：本文為博主原創(chuàng)文章，轉(zhuǎn)載請附上博文鏈接！

總結(jié)

以上是生活随笔為你收集整理的浏览器模式用户代理字符串(IE)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。