VBA抓取動態(tài)網(wǎng)頁，緊盯股票主力資金

一篇文章用VBA下載一部完整小說，VBA除了可以輕松下載一部《水滸傳》小說，還有什么用途？VBA獲取網(wǎng)頁信息（即爬蟲技術(shù)）其用處可多了。今天介紹各位小伙用來監(jiān)控的自選股票的主力資金變動的情況，愿大伙在2022年股票市場長紅！也是把上期一個網(wǎng)友評論的內(nèi)容（有些數(shù)據(jù)藏得很深，怎么找真正的地址……）回應(yīng)一下。

東富的主力資金流入圖

有一個理論我們會經(jīng)常聽到，A股的票漲漲跌跌主要是因為有大資金在活動、在操作，一些股票不斷上漲是因為有主力資金不斷買入，反而不斷下跌是因為主力資金不斷流出。喜歡做短線的，我們實時觀察這些主力資金就變得很有意義，很多網(wǎng)站都有主力資金的數(shù)據(jù)，但是要對多支股票進行觀察，則需要一個個打開網(wǎng)頁、APP或者電腦程序查看數(shù)據(jù)，這樣耗時也不能多支股票同框?qū)Ρ?。還有一些小伙正上班，打開股票軟件給老板或同事看到，總覺得怪怪的，當(dāng)然這不是鼓勵一些小伙上班玩股票，純屬用項目和大家一起交流學(xué)習(xí)。

用VBA就可以很輕松解決上述兩個問題。大伙先看看效果吧！

點擊按鈕更新數(shù)據(jù)：2022年12月21日數(shù)據(jù)

完整代碼如下：

Sub maincapital()

Application.DisplayAlerts = False
'循環(huán)A列數(shù)據(jù)，解析出相應(yīng)股票代碼
For Each cl In Range("a2:a" & Range("a2").End(xlDown).Row)
stock_code = Right(cl, 6) '取右邊6位字符
Dim strText, stcok_code As String
'拼接構(gòu)造網(wǎng)址
URL = "https://push2.eastmoney.com/api/qt/ulist.np/get?cb=fltt=2&secids=1." + stock_code + "&fields=f62%2Cf184%2Cf66%2Cf69%2Cf72%2Cf75%2Cf78%2Cf81%2Cf84%2Cf87%2Cf64%2Cf65%2Cf70%2Cf71%2Cf76%2Cf77%2Cf82%2Cf83%2Cf164%2Cf166%2Cf168%2Cf170%2Cf172%2Cf252%2Cf253%2Cf254%2Cf255%2Cf256%2Cf124%2Cf6%2Cf278%2Cf279%2Cf280%2Cf281%2Cf282&ut=b2884a393a59ad64002292a3e90d46a5&_=1641268581776"
With CreateObject("MSXML2.XMLHTTP")
    .Open "GET", URL, False
    .send
    strText = .responseText
End With

'判斷是有null，解決深A(yù)股和上A股網(wǎng)址不同拼接問題，secids=0.是深A(yù)；secids=1.是上A。
Dim regStrTest As Object
With CreateObject("VBScript.Regexp")
    .Pattern = "null"
    Set regStrTest = .Execute(strText)
End With
If regStrTest.Count > 0 Then
'如果出現(xiàn)null則拼接構(gòu)造一個新網(wǎng)址
URL = "https://push2.eastmoney.com/api/qt/ulist.np/get?cb=fltt=2&secids=0." + stock_code + "&fields=f62%2Cf184%2Cf66%2Cf69%2Cf72%2Cf75%2Cf78%2Cf81%2Cf84%2Cf87%2Cf64%2Cf65%2Cf70%2Cf71%2Cf76%2Cf77%2Cf82%2Cf83%2Cf164%2Cf166%2Cf168%2Cf170%2Cf172%2Cf252%2Cf253%2Cf254%2Cf255%2Cf256%2Cf124%2Cf6%2Cf278%2Cf279%2Cf280%2Cf281%2Cf282&ut=b2884a393a59ad64002292a3e90d46a5&_=1641268581776"
With CreateObject("MSXML2.XMLHTTP")
    .Open "GET", URL, False
    .send
    strText = .responseText
End With
End If

Rnum = cl.Row '股票名稱所在行號
'利用正則表達式得到我們想要的內(nèi)容，并寫相應(yīng)的表格
With CreateObject("VBScript.Regexp")
    .Pattern = """f62"":(.*?),"
Cells(Rnum, 2) = Round(.Execute(strText)(0).submatches.Item(0) / 100000000, 2) '主力凈流進
    .Pattern = """f184"":(.*?),"
Cells(Rnum, 3) = Round(.Execute(strText)(0).submatches.Item(0) / 100, 2) '主力凈比
    .Pattern = """f66"":(.*?),"
Cells(Rnum, 4) = Round(.Execute(strText)(0).submatches.Item(0) / 100000000, 2)  '超大單凈流進
    .Pattern = """f69"":(.*?),"
Cells(Rnum, 5) = Round(.Execute(strText)(0).submatches.Item(0) / 100, 2) '超大單凈比
    .Pattern = """f72"":(.*?),"
Cells(Rnum, 6) = Round(.Execute(strText)(0).submatches.Item(0) / 100000000, 2)  '大單凈流進
    .Pattern = """f75"":(.*?),"
Cells(Rnum, 7) = Round(.Execute(strText)(0).submatches.Item(0) / 100, 2) '大單凈比
    .Pattern = """f78"":(.*?),"
Cells(Rnum, 8) = Round(.Execute(strText)(0).submatches.Item(0) / 100000000, 2)  '中單凈流進
    .Pattern = """f81"":(.*?),"
Cells(Rnum, 9) = Round(.Execute(strText)(0).submatches.Item(0) / 100, 2) '中單凈比
    .Pattern = """f84"":(.*?),"
Cells(Rnum, 10) = Round(.Execute(strText)(0).submatches.Item(0) / 100000000, 2)  '小單凈流進
    .Pattern = """f87"":(.*?),"
Cells(Rnum, 11) = Round(.Execute(strText)(0).submatches.Item(0) / 100, 2) '小單凈比
    .Pattern = """f64"":(.*?),"
Cells(Rnum, 12) = Round(.Execute(strText)(0).submatches.Item(0) / 100000000, 2) '超大單流入
    .Pattern = """f65"":(.*?),"
Cells(Rnum, 13) = Round(.Execute(strText)(0).submatches.Item(0) / 100000000, 2) '超大流出
    .Pattern = """f70"":(.*?),"
Cells(Rnum, 14) = Round(.Execute(strText)(0).submatches.Item(0) / 100000000, 2) '大單流入
    .Pattern = """f71"":(.*?),"
Cells(Rnum, 14) = Round(.Execute(strText)(0).submatches.Item(0) / 100000000, 2) '大單流出
    
End With
Next
Application.DisplayAlerts = True
End Sub

這個項目用到的幾個重要知識：

獲取動態(tài)網(wǎng)頁加載數(shù)據(jù)的真正網(wǎng)址；
使用CreateObject("MSXML2.XMLHTTP")對象獲取網(wǎng)頁信息，基本框架可以參考用VBA下載一部完整小說；
使用CreateObject("VBScript.Regexp")正則表達式對象，處理網(wǎng)頁信息并寫入表格；
點擊按鈕調(diào)用函數(shù)

獲取動態(tài)網(wǎng)頁加載數(shù)據(jù)的真正網(wǎng)址

我們在目標(biāo)網(wǎng)頁點擊右鍵，并點擊“查看網(wǎng)頁源代碼”后，當(dāng)使用cttl+f鍵查看我們想要獲取的信息進行查看（這里我輸入主力凈比數(shù)據(jù)-42.76），發(fā)現(xiàn)并沒有相關(guān)的數(shù)據(jù)。

在源代碼網(wǎng)頁同時按cttl+f鍵查看

通過這個方法基本可以判斷目標(biāo)網(wǎng)頁的部分數(shù)據(jù)是使用動態(tài)加載的方式。簡單的動態(tài)加載數(shù)據(jù)，可以通過以下兩步獲取真正的網(wǎng)址：

第一步：打開瀏覽器控制臺。演示使用的瀏覽器是chrome，按下F12鍵打開瀏覽器控制臺，再次刷新網(wǎng)頁，在控制臺找到并點擊擴大鏡小按鈕，打開search對話框，這里輸入想找的數(shù)據(jù)（這里我輸入主力凈比數(shù)據(jù)42.76）后，按下回車鍵或輸入框旁邊的刷新按鍵，就會彈出一個“get”字符及一些類似網(wǎng)址的內(nèi)容，點擊彈出的內(nèi)容，右下面對話框會彈出相應(yīng)的內(nèi)容（對話框的菜單有Headers,Preview,Response……）

圖中主力凈比數(shù)據(jù)為-42.73和在輸入框的數(shù)據(jù)不一致，是因為資金數(shù)據(jù)動態(tài)變化了

第二步：找到加載數(shù)據(jù)的網(wǎng)址。點擊Headers可以看到Resquest URl字符，后面網(wǎng)址就是加載數(shù)據(jù)真正的網(wǎng)址，復(fù)制網(wǎng)址在瀏覽器打開，我們可以看到相應(yīng)的數(shù)據(jù)內(nèi)容。獲得這網(wǎng)址后，就可以通過VBA訪問這個網(wǎng)址獲取相應(yīng)的數(shù)據(jù)，按下來的工作就好辦了。

目標(biāo)數(shù)據(jù)的網(wǎng)址

使用CreateObject("MSXML2.XMLHTTP")對象獲取網(wǎng)頁信息

stock_code = Right(cl, 6) '取右邊6位字符
Dim strText, stcok_code As String '
'拼接構(gòu)造網(wǎng)址
URL = "https://push2.eastmoney.com/api/qt/ulist.np/get?cb=fltt=2&secids=1." + stock_code + "&fields=f62%2Cf184%2Cf66%2Cf69%2Cf72%2Cf75%2Cf78%2Cf81%2Cf84%2Cf87%2Cf64%2Cf65%2Cf70%2Cf71%2Cf76%2Cf77%2Cf82%2Cf83%2Cf164%2Cf166%2Cf168%2Cf170%2Cf172%2Cf252%2Cf253%2Cf254%2Cf255%2Cf256%2Cf124%2Cf6%2Cf278%2Cf279%2Cf280%2Cf281%2Cf282&ut=b2884a393a59ad64002292a3e90d46a5&_=1641268581776"
With CreateObject("MSXML2.XMLHTTP")
    .Open "GET", URL, False
    .send
    strText = .responseText
End With

'判斷是有null，解決深A(yù)股和上A股網(wǎng)址不同拼接問題，secids=0.是深A(yù)；secids=1.是上A。
Dim regStrTest As Object
With CreateObject("VBScript.Regexp")
    .Pattern = "null"
    Set regStrTest = .Execute(strText)
End With
If regStrTest.Count > 0 Then
'如果出現(xiàn)null則拼接構(gòu)造一個新網(wǎng)址
URL = "https://push2.eastmoney.com/api/qt/ulist.np/get?cb=fltt=2&secids=0." + stock_code + "&fields=f62%2Cf184%2Cf66%2Cf69%2Cf72%2Cf75%2Cf78%2Cf81%2Cf84%2Cf87%2Cf64%2Cf65%2Cf70%2Cf71%2Cf76%2Cf77%2Cf82%2Cf83%2Cf164%2Cf166%2Cf168%2Cf170%2Cf172%2Cf252%2Cf253%2Cf254%2Cf255%2Cf256%2Cf124%2Cf6%2Cf278%2Cf279%2Cf280%2Cf281%2Cf282&ut=b2884a393a59ad64002292a3e90d46a5&_=1641268581776"
With CreateObject("MSXML2.XMLHTTP")
    .Open "GET", URL, False
    .send
    strText = .responseText
End With
End If

上面代碼的說明：

1、使用right(目標(biāo)字符串，字符個數(shù))函數(shù)獲取目標(biāo)字符串從右邊數(shù)起第幾個字符。

2、做兩次網(wǎng)址請求是因為深A(yù)股和上A股的數(shù)據(jù)網(wǎng)址是有區(qū)別，網(wǎng)址的參數(shù)“secids=0.+ 股票代碼”是深A(yù)；“secids=1.+股票代碼”是上A。如果人為對每支股票判斷是上A還深A(yù)會很復(fù)雜，所以使用正則表達式，對請求數(shù)據(jù)內(nèi)容出現(xiàn)“null”字樣的網(wǎng)址，則更換網(wǎng)址參數(shù)。如下圖：

上A網(wǎng)址請求結(jié)果

深A(yù)網(wǎng)址請求結(jié)果

使用CreateObject("VBScript.Regexp")正則表達式對象獲取數(shù)據(jù)

For Each cl In Range("a2:a" & Range("a2").End(xlDown).Row)
……
Rnum = cl.Row '股票名稱所在行號
'利用正則表達式得到我們想要的內(nèi)容，并寫相應(yīng)的表格
With CreateObject("VBScript.Regexp")
    .Pattern = """f62"":(.*?)," 'VBA的英文的雙引號
Cells(Rnum, 2) = Round(.Execute(strText)(0).submatches.Item(0) / 100000000, 2) '主力凈流入
    .Pattern = """f184"":(.*?),"
Cells(Rnum, 3) = Round(.Execute(strText)(0).submatches.Item(0) / 100, 2) '主力凈比
    .Pattern = """f66"":(.*?),"
……

上面代碼的說明：

1、Range("a2").End(xlDown)是表示定位從A2單元往下最后一個不空值的單元格。

2、cl.Row是表示單元格的行數(shù)，Range("A1").Row，Cells(1, 1).Row都可以獲取單元格行數(shù)，列值則是Range("A1").Column和Cells(1, 1).Column。

3、.Pattern = """f62"":(.*?)," 是正則表達式（網(wǎng)頁的內(nèi)容是："f62":-15043563520.0），VBA的英文的雙引號用正則表式表示則是兩個雙引號，即是""。"f62":后面數(shù)據(jù)就是主力凈流入的數(shù)據(jù)，用(.*?)表示。再用.submatches.Item(0)得到目標(biāo)數(shù)據(jù)，這個數(shù)據(jù)是以元為單位，網(wǎng)頁顯示的是億，所以要/100000000。

4、Round（目標(biāo)數(shù)據(jù),小數(shù)點位數(shù)）是取多少位小數(shù)的方法。

點擊按鈕調(diào)用函數(shù)

Private Sub CommandButton1_Click()
Call maincapital '調(diào)用函數(shù)
End Sub

在這總結(jié)一下VBA抓取數(shù)據(jù)主要步驟：

分析網(wǎng)站->>分析網(wǎng)頁數(shù)據(jù)->>處理網(wǎng)頁數(shù)據(jù)->>儲存網(wǎng)頁數(shù)據(jù)

歡迎大家評論及提意見，相互學(xué)習(xí)，提高效率，創(chuàng)造價值。

篇，我整理和測試了六款來自國際大部隊的 Android 瀏覽器，包括大熱門的 Chrome、支持豐富擴展的 Firefox、主打隱私安全的 Firefox Focus、頗有歷史底蘊的 Opera，以及后來者 Microsoft Edge、Yandex。

除了國際大廠出品的產(chǎn)品外，國內(nèi)開發(fā)者也在 Android 瀏覽器品類下發(fā)力，在保持簡潔設(shè)計的基礎(chǔ)上，它們希望尋求提供更多差異化的功能。這次我挑選了五款 Android 國產(chǎn)瀏覽器，一起來了解一下它們有怎樣的表現(xiàn)，究竟有哪些亮點功能。

夸克：卡片風(fēng)格 + 神奇的下載效果

首先登場的是被不少人「吐槽」的夸克瀏覽器，網(wǎng)上有朋友抱怨夸克經(jīng)過近兩年（2016 年 10 月發(fā)布了第一版）迭代更新，安裝包體積是越來越大，甚至有反映說有些網(wǎng)站不能在夸克上打開（其他瀏覽器卻能正常打開）。在我的使用體驗中，我還沒有碰到這些問題，夸克橫空出現(xiàn)為當(dāng)年瀏覽器產(chǎn)品界帶來了一陣清新的風(fēng)格。

夸克首屏

在經(jīng)歷近兩年年時間的發(fā)展后，我認為夸克還是有幾個值得贊賞的功能亮點：

簡約的卡片風(fēng)格

在應(yīng)用主界面，夸克采用精簡的布局元素：品牌 Logo、搜索框、精選網(wǎng)站導(dǎo)航以及底欄共四部分構(gòu)建了簡約的首屏效果。除此之外，卡片風(fēng)格成為了夸克標(biāo)志性的元素之一，后臺標(biāo)簽頁管理、菜單彈出樣式均采用了卡片堆疊的風(fēng)格。

輕應(yīng)用

從去年年中推出的 v2.0 版本開始，夸克加入了輕應(yīng)用的功能，將一些在垂直領(lǐng)域頗有人氣和觀點的社區(qū)網(wǎng)站重新封裝，打包成輕應(yīng)用。從整體的效果來看，夸克的輕應(yīng)用在閱讀體驗上還是有一定的提升效果，這點對資訊類網(wǎng)站尤其明顯，內(nèi)容排版去除了惱人的廣告以及其他無關(guān)元素，同時在打開速度上也有不錯的表現(xiàn)。但是，輕應(yīng)用仍然缺乏調(diào)整文字大小選項、夜間模式下對比度下降導(dǎo)致內(nèi)容閱讀出現(xiàn)「看不清晰」的問題。

神奇的下載效果

使用夸克下載網(wǎng)盤資源有著神奇的效果，官方號稱支持多線程加速、多任務(wù)并行的特性，在采用默認的下載選項時，下載速度大約在 300KB-600KB/S 的區(qū)間內(nèi)。如果要實現(xiàn)提速下載的話，按照下面的圖示調(diào)整下載線程：

我們將下載線程調(diào)至 64，重新下載百度網(wǎng)盤的文件，速度可以穩(wěn)定達到 2-5MB/S，這樣實現(xiàn)了可能是手機端最簡單百度網(wǎng)盤資源高速下載的方法之一。

適度的手勢操作

夸克內(nèi)置的手勢操作顯得很「克制」，并沒有提供復(fù)雜的手勢組合，僅支持了幾個相當(dāng)常用的操作習(xí)慣，比如滑動前進/后退、底部上滑返回首頁、長按標(biāo)簽管理按鈕打開新標(biāo)簽頁。

同時，夸克還有幾個省心的實用功能：解決打開某些網(wǎng)頁時自動跳轉(zhuǎn)第三方 Apps 的問題；自帶的在線播放組件，適配了國內(nèi)大部分視頻網(wǎng)站，視頻彈窗間接解決了視頻頁面的干擾元素；在輸入網(wǎng)址時提供了快速補全工具條。

Via：幾百 KB 的小身板

Via 的出現(xiàn)不禁發(fā)出這樣的感嘆：原來瀏覽器應(yīng)用可以將體積做得如此小巧，首屏界面竟然可以做得如此純粹簡單，長時間體驗過后在這八百多 KB 小身板上發(fā)現(xiàn)不少實用功能：

還你定制安靜瀏覽器的權(quán)利

厭倦了瀏覽器首屏煩人的新聞內(nèi)容、露骨的資訊標(biāo)題，或者一大堆不感興趣的快速訪問導(dǎo)航，那么 Via 還你一個定制安靜瀏覽器的權(quán)利。初次打開 Via 瀏覽器，不禁想起了一句話：這才是一款純粹瀏覽器該有的樣子，主頁僅有頂欄和底欄的工具條、品牌 Logo 和搜索框。

雖然采用極簡的主頁設(shè)計風(fēng)格，但是 Via 依然擁有豐富的定制選項，包括了在主頁添加常用網(wǎng)站，Logo、背景圖片、顏色風(fēng)格、背景不透明度、隱藏搜索框，甚至給用戶自定義 CSS 的方式更細致地調(diào)整界面效果。

豐富的在線插件體系

Via 另一大特色功能是擁有豐富的在線插件體系，打開菜單欄的工具箱，我們看到了十個小工具，其中源碼和資源嗅探是我經(jīng)常使用的功能之一。源碼功能是為了偶爾學(xué)習(xí)一些網(wǎng)頁編程的知識（對于我這個小白來說），而資源嗅探解決下載網(wǎng)頁中的音樂、視頻等資源，比如需要下載 Instagram 的視頻，打開目標(biāo)頁面并播放視頻后，依次選擇 Via 瀏覽器「工具箱 - 資源嗅探」，將彈出真實的視頻地址，接下來使用第三方下載工具保存至本地，或者點擊資源地址后在新標(biāo)簽頁單獨播放視頻。

除此之外，Via 還提供了多個實用在線插件，包括了知乎去網(wǎng)頁限制、微信公眾號音頻下載、B 站視頻下載、回到頁面頂部/底部，用戶只需打開設(shè)置選項的插件頁面，即可在線安裝和管理插件。

多種手勢組合

與前面夸克相比，Via 支持更多的手勢操作，目前提供了滑動前進/后退、長按標(biāo)簽管理按鈕打開新標(biāo)簽頁、長按主頁按鈕彈出網(wǎng)址輸入框、長按底欄左右鍵實現(xiàn)回到網(wǎng)頁頂部/底部、長按菜單按鈕刷新頁面、上滑主頁鍵彈出后臺標(biāo)簽頁。雖然手勢學(xué)習(xí)的成本略高，但熟練后大大提升了瀏覽器操作的效率。

X 瀏覽器：有趣的地址欄命令

X 瀏覽器首屏設(shè)計風(fēng)格雖然不及 Via 來得純粹，除了自帶「合作」站點的網(wǎng)址導(dǎo)航外，并沒有推送新聞資訊等干擾因素，下面是我在體驗過后，找到了這款瀏覽器有趣的設(shè)計和強大的功能。

有趣的地址欄命令

與 Chrome 類似，X 瀏覽器支持在地址欄輸入 x: 開頭的特定代碼，直接打開相應(yīng)的功能：設(shè)置、歷史記錄、書簽等，比如輸入 x:setting 即可打開瀏覽器的設(shè)置頁面。其他命令還包括了 x:as、x:custom、x:gs、x:adb、x:me、x:addon、x:info，嘗試輸入以上的命令，探索更多的便捷操作。

即時翻譯和即時詞典

X 瀏覽器提供了常規(guī)的網(wǎng)頁全文翻譯功能（使用百度翻譯），在此基礎(chǔ)上還帶來了即時翻譯和即時詞典，其中即時翻譯是在長按選擇網(wǎng)頁的單詞時瀏覽器界面立刻顯示翻譯結(jié)果，即時詞典則擴展了地址欄功能，用戶輸入單詞時將看到翻譯結(jié)果在備選項中。

為每個網(wǎng)站設(shè)置不同的瀏覽策略

X 瀏覽器支持對每個網(wǎng)站設(shè)置單獨的瀏覽策略，比如打開知乎網(wǎng)站后，點擊瀏覽器界面左上角的按鈕，選擇「網(wǎng)站設(shè)置」，可自定義廣告攔截規(guī)則、切換獨立 UA、禁止頁面啟動外部應(yīng)用、禁用 JS、禁用 Cookies，將 UA 設(shè)置為 ipad 或者桌面后，可以突破知乎查看全部回答時跳轉(zhuǎn)至 Apps 下載頁面的問題。同理，運用不同的設(shè)置策略，可以突破 bilibili 在手機瀏覽器六分鐘視頻時長的限制。

內(nèi)置實用又強大的插件

目前，X 瀏覽器內(nèi)置了三款插件：二維碼增強版本、微信朋友圈、ADM 下載器，雖然前面兩個插件略顯普通，但是 ADM 下載器卻有著神奇的下載功效。不過吐槽一點的是每個插件下載后需要彈出單獨的安裝界面，對于一些朋友來說可能會有所反感。

最后，X 瀏覽器還擁有其他貼心的功能：嗅探媒體資源、強力廣告攔截效果，希望這款瀏覽器繼續(xù)保持這簡單極致的風(fēng)格，正如產(chǎn)品開發(fā)者所言：不完美但在原則上努力做到極致。

神奇瀏覽器：自主開發(fā)的閱讀模式

神奇瀏覽器屬于一個人開發(fā)的個性產(chǎn)品，僅約 900KB 的小身板，卻同樣擁有純粹簡潔的設(shè)計風(fēng)格和網(wǎng)頁瀏覽體驗。除了擁有之前幾款瀏覽器內(nèi)置的廣告攔截（神奇瀏覽器還有一個名為天網(wǎng)的廣告攔截進階功能）、翻譯、ADM 下載插件外，神奇瀏覽器在下面兩個方面有更加完善的功能。

分類顯示嗅探的資源

與前面介紹的 Via 和 X 瀏覽器類似，神奇瀏覽器同樣具備資源嗅探的功能，不過其提供的選項更加完整。神奇瀏覽器的資源嗅探支持分類顯示圖片、媒體、JS 文件、樣式文件等大分類，讓用戶更容易找到希望下載的資源。

閱讀模式

神奇閱讀器是我在這次體驗另中唯一支持閱讀模式的 Android 國產(chǎn)瀏覽器，雖然與稍后讀工具相比，其閱讀體驗上還有不少差距，但已經(jīng)提供了字體大小、主題背景色更換的選項。在閱讀模式下去除了網(wǎng)頁干擾元素，相當(dāng)適合閱讀深度長文章。除了提升資訊站點閱讀體驗外，神奇瀏覽器的閱讀模式還支持自動解析小說下一章，對在線小說愛好者會是一大福音。

星塵瀏覽器：小球設(shè)計和臨時搜功能

星塵瀏覽器是鳳凰工作室和世界之窗瀏覽器的創(chuàng)始人重新創(chuàng)業(yè)的作品之一，從瀏覽器的 Logo 圖標(biāo)依稀看到當(dāng)年世界之窗的影子。

有趣的一級菜單設(shè)置頁

如果厭倦了瀏覽器多級菜單的設(shè)置項，開關(guān)某個功能時需要打開多級路徑。星塵瀏覽器的設(shè)置項摒棄了多級菜單，僅僅保留了一級菜單，將全部功能開關(guān)項放置在一個頁面，方便用戶更加直觀地了解瀏覽器究竟提供了哪些功能選項。

快捷的交互操作

星塵瀏覽器擁有一個標(biāo)志性的小球設(shè)計，用戶通過底欄的主頁鍵可快速完成常用操作，小球支持左右滑動切換標(biāo)簽頁，向上滑動關(guān)閉當(dāng)前頁面。

臨時搜

星塵瀏覽器將地址欄放置在界面底部，并且在其右側(cè)加入了「臨時搜」的按鈕，用戶選中搜索詞，可以直接實現(xiàn)搜索功能，或者點擊臨時搜的圖標(biāo)后手動輸入搜索的內(nèi)容，簡化了網(wǎng)頁二次跳轉(zhuǎn)的操作步驟。

結(jié)語

在體驗了這五款 Android 國產(chǎn)瀏覽器后，我發(fā)現(xiàn)了它們在手勢操作、實用插件等功能上發(fā)力，這些在 Chrome、Firefox 國際大廠出品的瀏覽器上均沒有提供，深入使用后我認為這些小細節(jié)確實大大提升了瀏覽器的操作效率和網(wǎng)頁瀏覽體驗。

所以，我希望將這幾款瀏覽器介紹給正在尋求好用 Android 瀏覽器的朋友，歡迎你們在留言區(qū)寫下對這些瀏覽器點贊、吐槽的內(nèi)容。

時候，前端網(wǎng)頁需要知道，用戶使用的是手機瀏覽器還是桌面瀏覽器。

本文根據(jù) StackOverflow，整理了 JavaScript 偵測手機瀏覽器的五種方法。

一、navigator.userAgent

最簡單的方法就是分析瀏覽器的 user agent 字符串，它包含了設(shè)備信息。

JS 通過navigator.userAgent屬性拿到這個字符串，只要里面包含mobi、android、iphone等關(guān)鍵字，就可以認定是移動設(shè)備。

if (/Mobi|Android|iPhone/i.test(navigator.userAgent)) { // 當(dāng)前設(shè)備是移動設(shè)備 } // 另一種寫法 if ( navigator.userAgent.match(/Mobi/i) || navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/iPhone/i) ) { // 當(dāng)前設(shè)備是移動設(shè)備 }

這種方法的優(yōu)點是簡單方便，缺點是不可靠，因為用戶可以修改這個字符串，讓手機瀏覽器偽裝成桌面瀏覽器。

Chromium 系的瀏覽器，還有一個navigator.userAgentData屬性，也是類似的作用。不同之處是它將 user agent 字符串解析為一個對象，該對象的mobile屬性，返回一個布爾值，表示用戶是否使用移動設(shè)備。

const isMobile = navigator.userAgentData.mobile;

注意，蘋果的 Safari 瀏覽器和 Firefox 瀏覽器都不支持這個屬性，具體情況可以查看 Caniuse 網(wǎng)站。

此外，還有一個已經(jīng)廢除的navigator.platform屬性，所有瀏覽器都支持，所以也可以用。它返回一個字符串，表示用戶的操作系統(tǒng)。

if (/Android|iPhone|iPad|iPod/i.test(navigator.platform)) { // 當(dāng)前設(shè)備是移動設(shè)備 }

二、window.screen，window.innerWidth

另一種方法是通過屏幕寬度，判斷是否為手機。

window.screen對象返回用戶設(shè)備的屏幕信息，該對象的width屬性是屏幕寬度（單位為像素）。

if (window.screen.width < 500) { // 當(dāng)前設(shè)備是移動設(shè)備 }

上面示例中，如果屏幕寬度window.screen.width小于500像素，就認為是手機。

這個方法的缺點在于，如果手機橫屏使用，就識別不了。

另一個屬性window.innerWidth返回瀏覽器窗口里面的網(wǎng)頁可見部分的寬度，比較適合指定網(wǎng)頁在不同寬度下的樣式。

const getBrowserWidth = function() { if (window.innerWidth < 768) { return "xs"; } else if (window.innerWidth < 991) { return "sm"; } else if (window.innerWidth < 1199) { return "md"; } else { return "lg"; } };

三、window.orientation

第三種方法是偵測屏幕方向，手機屏幕可以隨時改變方向（橫屏或豎屏），桌面設(shè)備做不到。

window.orientation屬性用于獲取屏幕的當(dāng)前方向，只有移動設(shè)備才有這個屬性，桌面設(shè)備會返回undefined。

if (typeof window.orientation !== 'undefined') { // 當(dāng)前設(shè)備是移動設(shè)備 }

注意，iPhone 的 Safari 瀏覽器不支持該屬性。

四、touch 事件

第四種方法是，手機瀏覽器的 DOM 元素可以通過ontouchstart屬性，為touch事件指定監(jiān)聽函數(shù)。桌面設(shè)備沒有這個屬性。

function isMobile() { return ('ontouchstart' in document.documentElement); } // 另一種寫法 function isMobile() { try { document.createEvent("TouchEvent"); return true; } catch(e) { return false; } }

五、window.matchMedia()

最后一種方法是結(jié)合 CSS 來判斷。

CSS 通過 media query（媒介查詢）為網(wǎng)頁指定響應(yīng)式樣式。如果某個針對手機的 media query 語句生效了，就可以認為當(dāng)前設(shè)備是移動設(shè)備。

window.matchMedia()方法接受一個 CSS 的 media query 語句作為參數(shù)，判斷這個語句是否生效。

let isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;

上面示例中，window.matchMedia()的參數(shù)是一個 CSS 查詢語句，表示只對屏幕寬度不超過 700 像素的設(shè)備生效。它返回一個對象，該對象的matches屬性是一個布爾值。如果是true，就表示查詢生效，當(dāng)前設(shè)備是手機。

除了通過屏幕寬度判斷，還可以通過指針的精確性判斷。

let isMobile = window.matchMedia("(pointer:coarse)").matches;

上面示例中，CSS 語句pointer:coarse表示當(dāng)前設(shè)備的指針是不精確的。由于手機不支持鼠標(biāo)，只支持觸摸，所以符合這個條件。

有些設(shè)備支持多種指針，比如同時支持鼠標(biāo)和觸摸。pointer:coarse只用來判斷主指針，此外還有一個any-pointer命令判斷所有指針。

let isMobile = window.matchMedia("(any-pointer:coarse)").matches;

上面示例中，any-pointer:coarse表示所有指針里面，只要有一個指針是不精確的，就符合查詢條件。

六、工具包

除了上面這些方法，也可以使用別人寫好的工具包。這里推薦 react-device-detect，它支持多種粒度的設(shè)備偵測。

import {isMobile} from 'react-device-detect'; if (isMobile) { // 當(dāng)前設(shè)備是移動設(shè)備 }

（完）

在線咨詢

上一篇：HTML5游戲如何利用渠道傳播
下一篇：修改eclipse自帶格式化插件，美化格式化后樣式

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商