JavaScriptを使用してモバイルログインかどうかを判断する方法

スマートフォンの普及に伴い、携帯電話を使用して Web サイトにログインするユーザーが増えています。 Web サイト開発では、対応する最適化や調整を行うために、ユーザーが携帯電話からログインするかコンピューターからログインするかを判断する必要がある場合があります。この記事では、JavaScript を使用してユーザーが携帯電話からログインしているかどうかを判断する方法を紹介します。

1. ユーザー エージェントによる検出

ユーザー エージェントからブラウザとオペレーティング システムの情報を取得し、その中に特定のキーワードが含まれているかどうかを判断することで、ユーザーであるかどうかを判断できます。モバイルブラウザ 携帯電話からログインします。以下は一般的なモバイル ブラウザのユーザー エージェント情報です:

• モバイル デバイスのユーザー エージェント情報

  Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Mobile/15E148 Safari/604.1
  Mozilla/5.0 (iPad; CPU OS 14_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/86.0.4240.93 Mobile/15E148 Safari/604.1

  ログイン後にコピー

• Android デバイスのユーザー エージェント情報

  Mozilla/5.0 (Linux; Android 11; Pixel 5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Mobile Safari/537.36

  ログイン後にコピー

正規表現を使用してユーザー エージェントを照合し、モバイル ブラウザのキーワードが含まれているかどうかを判断できます。以下は、携帯電話によるログインかどうかを判断する JavaScript コードです。

function isMobile() {
    const ua = navigator.userAgent;
    const isIOS = /iPhone|iPad|iPod/i.test(ua);
    const isAndroid = /Android/i.test(ua);
    const isMobile = isIOS || isAndroid;
    return isMobile;
}

上記のコードでは、まずブラウザのユーザー エージェント情報を取得し、次に正規表現を使用して、その情報に次の情報が含まれているかどうかを判断します。 iPhone、iPad、iPod、Android モバイル ブラウザのキーワードを待って、最終的にユーザーが携帯電話を介してログインしたかどうかを示すブール値を返します。

2. 画面解像度による検出

ユーザーが携帯電話を介してログインしているかどうかを判断するもう 1 つの方法は、画面解像度による検出です。携帯電話とコンピュータの画面解像度は大きく異なるため、画面解像度に基づいて、ユーザーが携帯電話からログインしているかコンピュータからログインしているかを判断できます。

通常、携帯電話の画面の幅は 768 ピクセルを超えませんが、コンピュータの画面の幅は通常 1024 ピクセルを超えます。したがって、現在の画面幅が 768 ピクセル未満であるかどうかを判断して、ユーザーが携帯電話を介してログインしているかどうかを判断できます。

次は、モバイル ログインであるかどうかを判断する JavaScript コードです:

function isMobile() {
    const width = window.innerWidth;
    const isMobile = width <= 768;
    return isMobile;
}

上記のコードでは、現在のウィンドウの幅を取得し、それがそれより小さいか等しいかどうかを判断します。から 768 ピクセルまで、ユーザーが携帯電話経由でログインしているかどうかを判断します。

3. 総合的な使い方

上記 2 つの方法にはそれぞれ長所と短所があり、使用する場合は実際の状況に応じて選択する必要があります。通常、判定の精度を高めるために2つの方法を組み合わせて使用​​します。

以下は、上記の 2 つのメソッドを使用する JavaScript コードです。

function isMobile() {
    const ua = navigator.userAgent;
    const width = window.innerWidth;
    const isIOS = /iPhone|iPad|iPod/i.test(ua);
    const isAndroid = /Android/i.test(ua);
    const isMobile = isIOS || isAndroid || width <= 768;
    return isMobile;
}

上記のコードでは、ブラウザーのユーザー エージェント情報と現在のウィンドウの幅を取得します。同時に、正規表現と画面解像度を通じて、ユーザーが携帯電話を介してログインしているかどうかを判断します。

概要

JavaScript を使用してユーザーが携帯電話経由でログインしているかどうかを判断すると、Web サイトのユーザー エクスペリエンスを向上させるために、対応する最適化や調整を行うことができます。この記事では、ユーザーエージェント検出と画面解像度検出の2つの判定方法とその総合的な使い方を紹介します。この記事がすべての開発者にとって役立つことを願っています。

以上がJavaScriptを使用してモバイルログインかどうかを判断する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。