使用 Javascript 或 JQuery 檢測手機

Question

我對平板電腦或移動設備不感興趣。 就像用戶使用手機訪問頁面一樣。

我不是在尋找 100% 完美的東西。 但盡最大努力會很好。 如果我顯示一個短信“a”標簽鏈接，而您不在電話上……這不是世界末日，但我想盡我所能。

關於如何專門嘗試過濾掉手機的任何想法，即使它不是 100% 完美？

謝謝

Answer 1

也許您可以采取幾種方法來解決這個問題 - 兩者都會做出大量假設並且充其量是不可靠的！

第一種方法是響應式媒體查詢。 您可以假設手機的屏幕尺寸大於 x 且小於 y。 例如：

@media only screen and (min-width: 320px) and (max-width: 600px) {}

我會改進它以檢查高度，並找到一些關於常見設備尺寸的統計數據，以在那里放置合理的斷點。 您還需要考慮設備方向，當設備橫向時，它會比平時更寬。

您的另一個選擇是使用用戶代理字符串。 Apple 和 Android 設備都特別說明它是否是設備的移動版本。 在 iOS 上，您可以查找短語“iphone”。 在 android 上，您可以查找“移動 safari”。 Windows 手機和其他設備可能有類似的檢測，您需要使用模擬器來檢查每個 UA 字符串，然后構建一個合適的正則表達式。

最后一種可能性，如果您對設備處理電話操作的能力特別感興趣，可能是針對電話號碼運行檢測。

在頁面上創建一個包含電話號碼的元素。 在 iOS 中（在其他平台上可能類似），這將被修改，因此它會自動添加一個帶有 tel: 的 href，然后是您的號碼。 您可以在屏幕外繪制此元素，查看號碼是否自動格式化，如果是，則假設是手機。 我想 iPad 也能做到這一點，但如果您啟用了短信轉發功能，iPad 也將允許您發送短信。

Answer 2

如果您想為最終用戶操作視圖，我建議在服務器端執行此操作，但是我編寫了一個小型 JS 庫，可以在一段時間后進行此類檢查 - 看看： https : //github.com/dj10dj100 /what_browser

除此之外，您還可以使用 js 檢查瀏覽器是否是移動設備： if(what.device.isMobile() == true){ //Mobile device }

Answer 3

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 // some code..
}