JavaScriptが携帯電話を識別し、携帯サイトにジャンプし、パソコン版に戻ります。

今日のモバイル インターネット時代では、携帯電話で Web を閲覧するユーザーがますます増えています。したがって、さまざまなデバイスに適応した Web サイトを提供することは避けられない傾向となっています。その中で、いかにユーザーがパソコン版とモバイル版を簡単に切り替えられるかが鍵となってきます。

その中でも、JavaScript コードを通じてユーザーが使用しているデバイスを識別し、対応するバージョンの Web サイトに自動的にジャンプする方法が一般的です。次に、この記事ではこの方法の実装プロセスを紹介します。

1. デバイス タイプの検出

ユーザーが使用しているデバイスを知ることは、モバイル バージョンに移行するかどうかを判断するための前提条件です。これを行うには、JavaScript の navigator.userAgent プロパティを通じてユーザーのデバイス情報を取得する必要があります。

サンプル コードは次のとおりです。

// 判断是否为移动设备
function isMobile() {
   return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}

この関数を通じて、ユーザーがモバイル デバイスを使用しているかどうかを検出できます。テスト結果が true の場合、ユーザーがモバイル デバイスを使用しているため、Web サイトのモバイル バージョンにジャンプする必要があることを意味します。

2. Web サイトのモバイル バージョンにジャンプします

検出結果でユーザーがモバイル デバイスを使用していることが示された場合、ユーザーは Web サイトのモバイル バージョンにリダイレクトされる必要があります。

具体的なメソッドは次のとおりです:

if (isMobile()) {
   window.location.href = "http://m.example.com";
}

このコードでは、ユーザーがモバイル デバイスであるかどうかを判断するメソッドは、上記の isMobile() 関数を呼び出します。を選択すると、ユーザーはモバイル版の Web サイトにリダイレクトされます。ここの redirectUrl は、実際のモバイル版 Web サイトの URL に置き換える必要があります。

3. コンピューター版の Web サイトに戻る

ユーザーの便宜を図るため、ユーザーが「コンピューターに戻る」ことができるように、モバイル版の Web サイトにリンクを提供する必要があります。ウェブサイトのバージョン」。この機能を実装する際には、JavaScript コードを通じてユーザーのデバイスの種類を検出する必要もあります。ユーザーが PC デバイスを使用している場合、ユーザーは Web サイトのデスクトップ バージョンにリダイレクトされる必要があります。

サンプル コードは次のとおりです:

// 判断是否为 PC 设备
function isPC() {
   return !/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}

// 点击“回到电脑版网站”时，跳转到电脑版网站
$("#returnToPC").click(function(){
   if (isPC()) {
       window.location.href = "http://www.example.com";
   }
});

このコードでは、「Web サイトの PC バージョンに戻る」リンクがクリック イベントにバインドされています。ユーザーがこのリンクをクリックすると、ユーザーが使用していることが検出される PC デバイスがインストールされると、ユーザーは対応する PC バージョンの Web サイトにリダイレクトされます。

概要

上記のように、JavaScript でユーザーのデバイスの種類を識別し、対応するバージョンの Web サイトにジャンプするとともに、コンピューター版の Web サイトに戻る機能を提供します。は、多くの Web サイトにクロスプラットフォームで実装されています。基本を参照してください。実際の使用においては、ユーザーのニーズをより適切に満たすために、さまざまなビジネス ニーズに応じて最適化および拡張する必要があります。

以上がJavaScriptが携帯電話を識別し、携帯サイトにジャンプし、パソコン版に戻ります。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。