JavaScript 檢測移動瀏覽器

1. 通過檢測使用的裝置來檢測移動瀏覽器
2. 通過觸控式螢幕檢測移動瀏覽器

JavaScript 被廣泛用於開發基於 Web 的應用程式。大多數這些應用程式還與移動瀏覽器相容。

本教程將演示可用於使用 JavaScript 檢測移動瀏覽器的各種方法。

通過檢測使用的裝置來檢測移動瀏覽器

使用 JavaScript 識別移動瀏覽器的最簡單直接的方法是瀏覽當今市場上可用的各種裝置的列表，並檢查 useragent 是否對我們可用的列表中的任何一個裝置進行了補充。

以下是我們將使用的函式的程式碼片段 -

function detectMob() {
    const toMatch = [
        /Android/i,
        /webOS/i,
        /iPhone/i,
        /iPad/i,
        /iPod/i,
        /BlackBerry/i,
        /Windows Phone/i
    ];

    return toMatch.some((toMatchItem) => {
        return navigator.userAgent.match(toMatchItem);
    });
}

如果解析度小於或等於 800x600，我們可以假設目標裝置是移動裝置，從而進一步縮小對移動裝置的搜尋範圍，即使當今可用的大多數移動裝置都提供更高的解析度。

因此，建議同時使用這兩種方法，檢測使用的裝置和檢測裝置的解析度以獲得最高效率，以避免誤報。

以下是檢測使用者操作的裝置解析度的程式碼。

function detectMob() {
    return ( ( window.innerWidth <= 800 ) && ( window.innerHeight <= 600 ) );
}

通過觸控式螢幕檢測移動瀏覽器

另一種檢查使用者操作的目標裝置是否為移動裝置的方法是檢查使用者是否正在使用觸控操作裝置。由於當今市場上所有的手機都是觸控操作的，因此這種方法可靠且高效。

但是，由於平板電腦也是觸控操作的，因此存在一個限制，即該方法還將包括平板電腦。

我們可以使用以下程式碼通過檢視裝置是否使用觸控式螢幕操作來檢測移動瀏覽器。

var touchDevice = ('ontouchstart' in document.documentElement);

此功能可以進一步擴充套件到不僅包括手機和平板電腦，還包括支援觸控式螢幕的桌上型電腦和膝上型電腦。

var touchDevice = ('ontouchstart' in document.documentElement);