JavaScript mengenal pasti telefon mudah alih dan melompat ke tapak web mudah alih dan kembali ke versi komputer

Dalam era Internet mudah alih hari ini, semakin ramai pengguna memilih untuk menyemak imbas web melalui telefon mudah alih mereka. Oleh itu, ia telah menjadi satu trend yang tidak dapat dielakkan untuk menyediakan tapak web yang disesuaikan dengan peranti yang berbeza. Dalam konteks ini, cara untuk membenarkan pengguna bertukar dengan mudah antara versi komputer dan versi mudah alih telah menjadi kunci.

Antaranya, ia adalah kaedah biasa untuk mengenal pasti peranti yang digunakan oleh pengguna melalui kod Javascript dan secara automatik melompat ke versi disesuaikan laman web yang sepadan. Seterusnya, artikel ini akan memperkenalkan proses pelaksanaan kaedah ini.

1. Kesan jenis peranti

Mengetahui peranti yang digunakan pengguna ialah prasyarat untuk menilai sama ada untuk melompat ke versi mudah alih. Untuk melakukan ini, anda perlu mendapatkan maklumat peranti pengguna melalui sifat navigator.userAgent dalam Javascript.

Kod sampel adalah seperti berikut:

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

Melalui fungsi ini, anda boleh mengesan sama ada pengguna menggunakan peranti mudah alih. Jika keputusan ujian adalah benar, ini bermakna pengguna menggunakan peranti mudah alih dan perlu melompat ke versi mudah alih tapak web.

2. Lompat ke versi mudah alih tapak web

Jika hasil pengesanan menunjukkan bahawa pengguna menggunakan peranti mudah alih, pengguna perlu diubah hala ke versi mudah alih tapak web.

Kaedah khusus adalah seperti berikut:

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

Dalam kod ini, kaedah untuk menentukan sama ada pengguna ialah peranti mudah alih memanggil fungsi di atas ialah Mobile() Jika syarat dipenuhi, fungsi pengguna akan diubah hala ke laman web versi mudah alih. RedirectUrl di sini perlu digantikan dengan URL tapak web versi mudah alih yang sebenar.

3 Kembali ke versi PC tapak web

Untuk kemudahan pengguna, pautan perlu disediakan dalam versi mudah alih tapak web supaya pengguna boleh "kembali ke versi PC bagi laman web". Apabila melaksanakan fungsi ini, ia juga perlu untuk mengesan jenis peranti pengguna melalui kod Javascript. Jika pengguna menggunakan peranti PC, maka pengguna perlu diubah hala ke versi desktop tapak web.

Kod sampel adalah seperti berikut:

// 判断是否为 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";
   }
});

Dalam kod ini, pautan "Kembali ke versi PC tapak web" terikat pada acara klik apabila pengguna mengklik pada pautan ini , dikesan bahawa pengguna sedang menggunakan Selepas peranti PC dipasang, pengguna dialihkan ke versi PC yang sepadan bagi tapak web.

Ringkasan

Seperti yang dinyatakan di atas, mengenal pasti jenis peranti pengguna dalam Javascript dan melompat ke versi disesuaikan laman web yang sepadan, serta menyediakan fungsi kembali ke versi komputer tapak web , ialah pelaksanaan merentas platform untuk banyak tapak web Semak imbas asas. Dalam penggunaan sebenar, ia perlu dioptimumkan dan dikembangkan mengikut keperluan perniagaan yang berbeza untuk memenuhi keperluan pengguna dengan lebih baik.

Atas ialah kandungan terperinci JavaScript mengenal pasti telefon mudah alih dan melompat ke tapak web mudah alih dan kembali ke versi komputer. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!