Bagaimana untuk menentukan sama ada ia log masuk mudah alih dengan javascript

Dengan populariti telefon pintar, semakin ramai pengguna memilih untuk menggunakan telefon mudah alih untuk log masuk ke tapak web. Dalam pembangunan tapak web, kadangkala kita perlu menentukan sama ada pengguna log masuk melalui telefon mudah alih atau komputer untuk membuat pengoptimuman dan pelarasan yang sepadan. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk menentukan sama ada pengguna log masuk melalui telefon mudah alih.

1. Pengesanan melalui ejen pengguna

Kami boleh mendapatkan maklumat penyemak imbas dan sistem pengendalian daripada ejen pengguna, dan menentukan sama ada pengguna adalah pengguna dengan menilai sama ada ia mengandungi kata kunci khusus pelayar mudah alih Log masuk melalui telefon bimbit. Berikut ialah maklumat ejen pengguna penyemak imbas mudah alih biasa:

• Maklumat ejen pengguna peranti mudah alih

  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

• Maklumat ejen pengguna peranti Android

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

Kami boleh menggunakan ungkapan biasa untuk memadankan ejen pengguna untuk menentukan sama ada ia mengandungi kata kunci penyemak imbas mudah alih. Berikut ialah kod JavaScript untuk menentukan sama ada ia log masuk telefon mudah alih:

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;
}

Dalam kod di atas, kami mula-mula mendapatkan maklumat ejen pengguna penyemak imbas, dan kemudian menggunakan ungkapan biasa untuk menentukan sama ada ia mengandungi iPhone, iPad, iPod dan Android serta kata kunci penyemak imbas mudah alih yang lain, dan akhirnya mengembalikan nilai Boolean yang menunjukkan sama ada pengguna melog masuk melalui telefon mudah alih.

2. Kesan melalui resolusi skrin

Cara lain untuk menentukan sama ada pengguna log masuk melalui telefon mudah alih adalah untuk mengesan melalui resolusi skrin. Memandangkan resolusi skrin telefon mudah alih dan komputer adalah sangat berbeza, kita boleh menentukan sama ada pengguna log masuk melalui telefon bimbit atau komputer berdasarkan resolusi skrin.

Biasanya, lebar skrin telefon bimbit tidak melebihi 768 piksel, manakala lebar skrin komputer biasanya lebih besar daripada 1024 piksel. Oleh itu, kami boleh menentukan sama ada lebar skrin semasa kurang daripada 768 piksel untuk menentukan sama ada pengguna log masuk melalui telefon bimbit.

Berikut ialah kod JavaScript untuk menentukan sama ada ia log masuk telefon mudah alih:

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

Dalam kod di atas, kami memperoleh lebar tetingkap semasa dan menentukan sama ada ia kurang daripada atau sama dengan 768 piksel untuk menentukan pengguna Sama ada anda log masuk melalui telefon mudah alih.

3. Penggunaan komprehensif

Kedua-dua kaedah di atas masing-masing mempunyai kelebihan dan kekurangan masing-masing, dan anda perlu memilih mengikut situasi sebenar semasa menggunakannya. Biasanya, kita boleh menggunakan dua kaedah dalam kombinasi untuk meningkatkan ketepatan penghakiman.

Berikut ialah kod JavaScript yang menggabungkan dua kaedah di atas:

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;
}

Dalam kod di atas, kami pada masa yang sama memperoleh maklumat ejen pengguna penyemak imbas dan lebar tetingkap semasa , melalui Ungkapan biasa dan resolusi skrin untuk menentukan sama ada pengguna dilog masuk melalui telefon mudah alih.

Ringkasan

Menggunakan JavaScript untuk menentukan sama ada pengguna log masuk melalui telefon mudah alih boleh membantu kami membuat pengoptimuman dan pelarasan yang sepadan untuk meningkatkan pengalaman pengguna tapak web. Artikel ini memperkenalkan dua kaedah penghakiman, iaitu menggunakan pengesanan ejen pengguna dan pengesanan resolusi skrin, dan cara menggunakannya secara menyeluruh. Saya harap artikel ini dapat membantu semua pembangun.

Atas ialah kandungan terperinci Bagaimana untuk menentukan sama ada ia log masuk mudah alih dengan javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!