整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
一篇文章用VBA下載一部完整小說，VBA除了可以輕松下載一部《水滸傳》小說，還有什么用途？VBA獲取網頁信息（即爬蟲技術）其用處可多了。今天介紹各位小伙用來監控的自選股票的主力資金變動的情況，愿大伙在2022年股票市場長紅！也是把上期一個網友評論的內容（有些數據藏得很深，怎么找真正的地址……）回應一下。
東富的主力資金流入圖
有一個理論我們會經常聽到，A股的票漲漲跌跌主要是因為有大資金在活動、在操作，一些股票不斷上漲是因為有主力資金不斷買入，反而不斷下跌是因為主力資金不斷流出。喜歡做短線的，我們實時觀察這些主力資金就變得很有意義，很多網站都有主力資金的數據，但是要對多支股票進行觀察，則需要一個個打開網頁、APP或者電腦程序查看數據，這樣耗時也不能多支股票同框對比。還有一些小伙正上班，打開股票軟件給老板或同事看到，總覺得怪怪的，當然這不是鼓勵一些小伙上班玩股票，純屬用項目和大家一起交流學習。
用VBA就可以很輕松解決上述兩個問題。大伙先看看效果吧！
點擊按鈕更新數據：2022年12月21日數據
完整代碼如下：
Sub maincapital()
Application.DisplayAlerts = False
'循環A列數據，解析出相應股票代碼
For Each cl In Range("a2:a" & Range("a2").End(xlDown).Row)
stock_code = Right(cl, 6) '取右邊6位字符
Dim strText, stcok_code As String
'拼接構造網址
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股和上A股網址不同拼接問題，secids=0.是深A；secids=1.是上A。
Dim regStrTest As Object
With CreateObject("VBScript.Regexp")
.Pattern = "null"
Set regStrTest = .Execute(strText)
End With
If regStrTest.Count > 0 Then
'如果出現null則拼接構造一個新網址
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 '股票名稱所在行號
'利用正則表達式得到我們想要的內容，并寫相應的表格
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這個項目用到的幾個重要知識：
獲取動態網頁加載數據的真正網址
我們在目標網頁點擊右鍵，并點擊“查看網頁源代碼”后，當使用cttl+f鍵查看我們想要獲取的信息進行查看（這里我輸入主力凈比數據-42.76），發現并沒有相關的數據。
在源代碼網頁同時按cttl+f鍵查看
通過這個方法基本可以判斷目標網頁的部分數據是使用動態加載的方式。簡單的動態加載數據，可以通過以下兩步獲取真正的網址：
第一步：打開瀏覽器控制臺。演示使用的瀏覽器是chrome，按下F12鍵打開瀏覽器控制臺，再次刷新網頁，在控制臺找到并點擊擴大鏡小按鈕，打開search對話框，這里輸入想找的數據（這里我輸入主力凈比數據42.76）后，按下回車鍵或輸入框旁邊的刷新按鍵，就會彈出一個“get”字符及一些類似網址的內容，點擊彈出的內容，右下面對話框會彈出相應的內容（對話框的菜單有Headers,Preview,Response……）
圖中主力凈比數據為-42.73和在輸入框的數據不一致，是因為資金數據動態變化了
第二步：找到加載數據的網址。點擊Headers可以看到Resquest URl字符，后面網址就是加載數據真正的網址，復制網址在瀏覽器打開，我們可以看到相應的數據內容。獲得這網址后，就可以通過VBA訪問這個網址獲取相應的數據，按下來的工作就好辦了。
目標數據的網址
使用CreateObject("MSXML2.XMLHTTP")對象獲取網頁信息
stock_code = Right(cl, 6) '取右邊6位字符
Dim strText, stcok_code As String '
'拼接構造網址
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股和上A股網址不同拼接問題，secids=0.是深A；secids=1.是上A。
Dim regStrTest As Object
With CreateObject("VBScript.Regexp")
.Pattern = "null"
Set regStrTest = .Execute(strText)
End With
If regStrTest.Count > 0 Then
'如果出現null則拼接構造一個新網址
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(目標字符串，字符個數)函數獲取目標字符串從右邊數起第幾個字符。
2、做兩次網址請求是因為深A股和上A股的數據網址是有區別，網址的參數“secids=0.+ 股票代碼”是深A；“secids=1.+股票代碼”是上A。如果人為對每支股票判斷是上A還深A會很復雜，所以使用正則表達式，對請求數據內容出現“null”字樣的網址，則更換網址參數。如下圖：
上A網址請求結果
深A網址請求結果
使用CreateObject("VBScript.Regexp")正則表達式對象獲取數據
For Each cl In Range("a2:a" & Range("a2").End(xlDown).Row)
……
Rnum = cl.Row '股票名稱所在行號
'利用正則表達式得到我們想要的內容，并寫相應的表格
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是表示單元格的行數，Range("A1").Row，Cells(1, 1).Row都可以獲取單元格行數，列值則是Range("A1").Column和Cells(1, 1).Column。
3、.Pattern = """f62"":(.*?)," 是正則表達式（網頁的內容是："f62":-15043563520.0），VBA的英文的雙引號用正則表式表示則是兩個雙引號，即是""。"f62":后面數據就是主力凈流入的數據，用(.*?)表示。再用.submatches.Item(0)得到目標數據，這個數據是以元為單位，網頁顯示的是億，所以要/100000000。
4、Round（目標數據,小數點位數）是取多少位小數的方法。
點擊按鈕調用函數
Private Sub CommandButton1_Click()
Call maincapital '調用函數
End Sub在這總結一下VBA抓取數據主要步驟：
分析網站->>分析網頁數據->>處理網頁數據->>儲存網頁數據
歡迎大家評論及提意見，相互學習，提高效率，創造價值。
篇，我整理和測試了六款來自國際大部隊的 Android 瀏覽器，包括大熱門的 Chrome、支持豐富擴展的 Firefox、主打隱私安全的 Firefox Focus、頗有歷史底蘊的 Opera，以及后來者 Microsoft Edge、Yandex。
除了國際大廠出品的產品外，國內開發者也在 Android 瀏覽器品類下發力，在保持簡潔設計的基礎上，它們希望尋求提供更多差異化的功能。這次我挑選了五款 Android 國產瀏覽器，一起來了解一下它們有怎樣的表現，究竟有哪些亮點功能。
首先登場的是被不少人「吐槽」的 夸克瀏覽器，網上有朋友抱怨夸克經過近兩年（2016 年 10 月發布了第一版）迭代更新，安裝包體積是越來越大，甚至有反映說有些網站不能在夸克上打開（其他瀏覽器卻能正常打開）。在我的使用體驗中，我還沒有碰到這些問題，夸克橫空出現為當年瀏覽器產品界帶來了一陣清新的風格。
夸克首屏
在經歷近兩年年時間的發展后，我認為夸克還是有幾個值得贊賞的功能亮點：
簡約的卡片風格
在應用主界面，夸克采用精簡的布局元素：品牌 Logo、搜索框、精選網站導航以及底欄共四部分構建了簡約的首屏效果。除此之外，卡片風格成為了夸克標志性的元素之一，后臺標簽頁管理、菜單彈出樣式均采用了卡片堆疊的風格。
輕應用
從去年年中推出的 v2.0 版本開始，夸克加入了輕應用的功能，將一些在垂直領域頗有人氣和觀點的社區網站重新封裝，打包成輕應用。從整體的效果來看，夸克的輕應用在閱讀體驗上還是有一定的提升效果，這點對資訊類網站尤其明顯，內容排版去除了惱人的廣告以及其他無關元素，同時在打開速度上也有不錯的表現。但是，輕應用仍然缺乏調整文字大小選項、夜間模式下對比度下降導致內容閱讀出現「看不清晰」的問題。
神奇的下載效果
使用夸克下載網盤資源有著神奇的效果，官方號稱支持多線程加速、多任務并行的特性，在采用默認的下載選項時，下載速度大約在 300KB-600KB/S 的區間內。如果要實現提速下載的話，按照下面的圖示調整下載線程：
我們將下載線程調至 64，重新下載百度網盤的文件，速度可以穩定達到 2-5MB/S，這樣實現了可能是手機端最簡單百度網盤資源高速下載的方法之一。
適度的手勢操作
夸克內置的手勢操作顯得很「克制」，并沒有提供復雜的手勢組合，僅支持了幾個相當常用的操作習慣，比如滑動前進/后退、底部上滑返回首頁、長按標簽管理按鈕打開新標簽頁。
同時，夸克還有幾個省心的實用功能：解決打開某些網頁時自動跳轉第三方 Apps 的問題；自帶的在線播放組件，適配了國內大部分視頻網站，視頻彈窗間接解決了視頻頁面的干擾元素；在輸入網址時提供了快速補全工具條。
Via 的出現不禁發出這樣的感嘆：原來瀏覽器應用可以將體積做得如此小巧，首屏界面竟然可以做得如此純粹簡單，長時間體驗過后在這八百多 KB 小身板上發現不少實用功能：
還你定制安靜瀏覽器的權利
厭倦了瀏覽器首屏煩人的新聞內容、露骨的資訊標題，或者一大堆不感興趣的快速訪問導航，那么 Via 還你一個定制安靜瀏覽器的權利。初次打開 Via 瀏覽器，不禁想起了一句話：這才是一款純粹瀏覽器該有的樣子，主頁僅有頂欄和底欄的工具條、品牌 Logo 和搜索框。
雖然采用極簡的主頁設計風格，但是 Via 依然擁有豐富的定制選項，包括了在主頁添加常用網站，Logo、背景圖片、顏色風格、背景不透明度、隱藏搜索框，甚至給用戶自定義 CSS 的方式更細致地調整界面效果。
豐富的在線插件體系
Via 另一大特色功能是擁有豐富的在線插件體系，打開菜單欄的工具箱，我們看到了十個小工具，其中源碼和資源嗅探是我經常使用的功能之一。源碼功能是為了偶爾學習一些網頁編程的知識（對于我這個小白來說），而資源嗅探解決下載網頁中的音樂、視頻等資源，比如需要下載 Instagram 的視頻，打開目標頁面并播放視頻后，依次選擇 Via 瀏覽器「工具箱 - 資源嗅探」，將彈出真實的視頻地址，接下來使用第三方下載工具保存至本地，或者點擊資源地址后在新標簽頁單獨播放視頻。
除此之外，Via 還提供了多個實用在線插件，包括了知乎去網頁限制、微信公眾號音頻下載、B 站視頻下載、回到頁面頂部/底部，用戶只需打開設置選項的插件頁面，即可在線安裝和管理插件。
多種手勢組合
與前面夸克相比，Via 支持更多的手勢操作，目前提供了滑動前進/后退、長按標簽管理按鈕打開新標簽頁、長按主頁按鈕彈出網址輸入框、長按底欄左右鍵實現回到網頁頂部/底部、長按菜單按鈕刷新頁面、上滑主頁鍵彈出后臺標簽頁。雖然手勢學習的成本略高，但熟練后大大提升了瀏覽器操作的效率。
X 瀏覽器 首屏設計風格雖然不及 Via 來得純粹，除了自帶「合作」站點的網址導航外，并沒有推送新聞資訊等干擾因素，下面是我在體驗過后，找到了這款瀏覽器有趣的設計和強大的功能。
有趣的地址欄命令
與 Chrome 類似，X 瀏覽器支持在地址欄輸入 x: 開頭的特定代碼，直接打開相應的功能：設置、歷史記錄、書簽等，比如輸入 x:setting 即可打開瀏覽器的設置頁面。其他命令還包括了 x:as、x:custom、x:gs、x:adb、x:me、x:addon、x:info，嘗試輸入以上的命令，探索更多的便捷操作。
即時翻譯和即時詞典
X 瀏覽器提供了常規的網頁全文翻譯功能（使用百度翻譯），在此基礎上還帶來了即時翻譯和即時詞典，其中即時翻譯是在長按選擇網頁的單詞時瀏覽器界面立刻顯示翻譯結果，即時詞典則擴展了地址欄功能，用戶輸入單詞時將看到翻譯結果在備選項中。
為每個網站設置不同的瀏覽策略
X 瀏覽器支持對每個網站設置單獨的瀏覽策略，比如打開知乎網站后，點擊瀏覽器界面左上角的按鈕，選擇「網站設置」，可自定義廣告攔截規則、切換獨立 UA、禁止頁面啟動外部應用、禁用 JS、禁用 Cookies，將 UA 設置為 ipad 或者桌面后，可以突破知乎查看全部回答時跳轉至 Apps 下載頁面的問題。同理，運用不同的設置策略，可以突破 bilibili 在手機瀏覽器六分鐘視頻時長的限制。
內置實用又強大的插件
目前，X 瀏覽器內置了三款插件：二維碼增強版本、微信朋友圈、ADM 下載器，雖然前面兩個插件略顯普通，但是 ADM 下載器卻有著神奇的下載功效。不過吐槽一點的是每個插件下載后需要彈出單獨的安裝界面，對于一些朋友來說可能會有所反感。
最后，X 瀏覽器還擁有其他貼心的功能：嗅探媒體資源、強力廣告攔截效果，希望這款瀏覽器繼續保持這簡單極致的風格，正如產品開發者所言：不完美但在原則上努力做到極致。
神奇瀏覽器 屬于一個人開發的個性產品，僅約 900KB 的小身板，卻同樣擁有純粹簡潔的設計風格和網頁瀏覽體驗。除了擁有之前幾款瀏覽器內置的廣告攔截（神奇瀏覽器還有一個名為天網的廣告攔截進階功能）、翻譯、ADM 下載插件外，神奇瀏覽器在下面兩個方面有更加完善的功能。
分類顯示嗅探的資源
與前面介紹的 Via 和 X 瀏覽器類似，神奇瀏覽器同樣具備資源嗅探的功能，不過其提供的選項更加完整。神奇瀏覽器的資源嗅探支持分類顯示圖片、媒體、JS 文件、樣式文件等大分類，讓用戶更容易找到希望下載的資源。
閱讀模式
神奇閱讀器是我在這次體驗另中唯一支持閱讀模式的 Android 國產瀏覽器，雖然與稍后讀工具相比，其閱讀體驗上還有不少差距，但已經提供了字體大小、主題背景色更換的選項。在閱讀模式下去除了網頁干擾元素，相當適合閱讀深度長文章。除了提升資訊站點閱讀體驗外，神奇瀏覽器的閱讀模式還支持自動解析小說下一章 ，對在線小說愛好者會是一大福音。
星塵瀏覽器 是鳳凰工作室和世界之窗瀏覽器的創始人重新創業的作品之一，從瀏覽器的 Logo 圖標依稀看到當年世界之窗的影子。
有趣的一級菜單設置頁
如果厭倦了瀏覽器多級菜單的設置項，開關某個功能時需要打開多級路徑。星塵瀏覽器的設置項摒棄了多級菜單，僅僅保留了一級菜單，將全部功能開關項放置在一個頁面，方便用戶更加直觀地了解瀏覽器究竟提供了哪些功能選項。
快捷的交互操作
星塵瀏覽器擁有一個標志性的小球設計，用戶通過底欄的主頁鍵可快速完成常用操作，小球支持左右滑動切換標簽頁，向上滑動關閉當前頁面。
臨時搜
星塵瀏覽器將地址欄放置在界面底部，并且在其右側加入了「臨時搜」的按鈕，用戶選中搜索詞，可以直接實現搜索功能，或者點擊臨時搜的圖標后手動輸入搜索的內容，簡化了網頁二次跳轉的操作步驟。
在體驗了這五款 Android 國產瀏覽器后，我發現了它們在手勢操作、實用插件等功能上發力，這些在 Chrome、Firefox 國際大廠出品的瀏覽器上均沒有提供，深入使用后我認為這些小細節確實大大提升了瀏覽器的操作效率和網頁瀏覽體驗。
所以，我希望將這幾款瀏覽器介紹給正在尋求好用 Android 瀏覽器的朋友，歡迎你們在留言區寫下對這些瀏覽器點贊、吐槽的內容。
時候，前端網頁需要知道，用戶使用的是手機瀏覽器還是桌面瀏覽器。
本文根據 StackOverflow，整理了 JavaScript 偵測手機瀏覽器的五種方法。
最簡單的方法就是分析瀏覽器的 user agent 字符串，它包含了設備信息。
JS 通過navigator.userAgent屬性拿到這個字符串，只要里面包含mobi、android、iphone等關鍵字，就可以認定是移動設備。
if (/Mobi|Android|iPhone/i.test(navigator.userAgent)) { // 當前設備是移動設備 } // 另一種寫法 if ( navigator.userAgent.match(/Mobi/i) || navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/iPhone/i) ) { // 當前設備是移動設備 }
這種方法的優點是簡單方便，缺點是不可靠，因為用戶可以修改這個字符串，讓手機瀏覽器偽裝成桌面瀏覽器。
Chromium 系的瀏覽器，還有一個navigator.userAgentData屬性，也是類似的作用。不同之處是它將 user agent 字符串解析為一個對象，該對象的mobile屬性，返回一個布爾值，表示用戶是否使用移動設備。
const isMobile = navigator.userAgentData.mobile;
注意，蘋果的 Safari 瀏覽器和 Firefox 瀏覽器都不支持這個屬性，具體情況可以查看 Caniuse 網站。
此外，還有一個已經廢除的navigator.platform屬性，所有瀏覽器都支持，所以也可以用。它返回一個字符串，表示用戶的操作系統。
if (/Android|iPhone|iPad|iPod/i.test(navigator.platform)) { // 當前設備是移動設備 }
另一種方法是通過屏幕寬度，判斷是否為手機。
window.screen對象返回用戶設備的屏幕信息，該對象的width屬性是屏幕寬度（單位為像素）。
if (window.screen.width < 500) { // 當前設備是移動設備 }
上面示例中，如果屏幕寬度window.screen.width小于500像素，就認為是手機。
這個方法的缺點在于，如果手機橫屏使用，就識別不了。
另一個屬性window.innerWidth返回瀏覽器窗口里面的網頁可見部分的寬度，比較適合指定網頁在不同寬度下的樣式。
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屬性用于獲取屏幕的當前方向，只有移動設備才有這個屬性，桌面設備會返回undefined。
if (typeof window.orientation !== 'undefined') { // 當前設備是移動設備 }
注意，iPhone 的 Safari 瀏覽器不支持該屬性。
第四種方法是，手機瀏覽器的 DOM 元素可以通過ontouchstart屬性，為touch事件指定監聽函數。桌面設備沒有這個屬性。
function isMobile() { return ('ontouchstart' in document.documentElement); } // 另一種寫法 function isMobile() { try { document.createEvent("TouchEvent"); return true; } catch(e) { return false; } }
最后一種方法是結合 CSS 來判斷。
CSS 通過 media query（媒介查詢）為網頁指定響應式樣式。如果某個針對手機的 media query 語句生效了，就可以認為當前設備是移動設備。
window.matchMedia()方法接受一個 CSS 的 media query 語句作為參數，判斷這個語句是否生效。
let isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;
上面示例中，window.matchMedia()的參數是一個 CSS 查詢語句，表示只對屏幕寬度不超過 700 像素的設備生效。它返回一個對象，該對象的matches屬性是一個布爾值。如果是true，就表示查詢生效，當前設備是手機。
除了通過屏幕寬度判斷，還可以通過指針的精確性判斷。
let isMobile = window.matchMedia("(pointer:coarse)").matches;
上面示例中，CSS 語句pointer:coarse表示當前設備的指針是不精確的。由于手機不支持鼠標，只支持觸摸，所以符合這個條件。
有些設備支持多種指針，比如同時支持鼠標和觸摸。pointer:coarse只用來判斷主指針，此外還有一個any-pointer命令判斷所有指針。
let isMobile = window.matchMedia("(any-pointer:coarse)").matches;
上面示例中，any-pointer:coarse表示所有指針里面，只要有一個指針是不精確的，就符合查詢條件。
除了上面這些方法，也可以使用別人寫好的工具包。這里推薦 react-device-detect，它支持多種粒度的設備偵測。
import {isMobile} from 'react-device-detect'; if (isMobile) { // 當前設備是移動設備 }
（完）
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
