Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > JavaScript mengenal pasti telefon mudah alih dan melompat ke tapak web mudah alih dan kembali ke versi komputer

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

王林
Lepaskan: 2023-05-21 09:44:38
asal
974 orang telah melayarinya

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);
}
Salin selepas log masuk

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";
}
Salin selepas log masuk

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";
   }
});
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan