Rumah > hujung hadapan web > tutorial js > Bagaimanakah saya boleh mengesan jika pengguna menggunakan peranti mudah alih menggunakan jQuery?

Bagaimanakah saya boleh mengesan jika pengguna menggunakan peranti mudah alih menggunakan jQuery?

DDD
Lepaskan: 2024-12-26 21:37:11
asal
561 orang telah melayarinya

How can I detect if a user is on a mobile device using jQuery?

Cara mengesan peranti mudah alih menggunakan jQuery

Mengesan sama ada pengguna mengakses tapak web anda daripada peranti mudah alih boleh berguna untuk menyesuaikan anda kandungan atau pengalaman pengguna dengan sewajarnya. jQuery, pustaka JavaScript yang popular, menawarkan cara untuk mencapai pengesanan ini, tetapi fungsi $.browsernya tidak disyorkan kerana ia menyediakan maklumat terhad dan berkemungkinan tidak tepat.

Sebaliknya, anda boleh menggunakan gabungan JavaScript dan CSS untuk mengesan peranti mudah alih. Satu pendekatan melibatkan penggunaan sifat navigator.userAgent, yang mengandungi maklumat tentang peranti pengguna, penyemak imbas dan sistem pengendalian. Dengan memadankan logik pengesanan peranti anda dengan nilai yang diketahui dalam rentetan navigator.userAgent, anda boleh menentukan sama ada peranti mudah alih sedang digunakan.

Berikut ialah contoh cara anda boleh melakukannya menggunakan JavaScript mudah:

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
  // Some code for mobile devices
}
Salin selepas log masuk

Untuk menjadikannya lebih mudah diakses melalui jQuery, anda boleh menggabungkannya dengan yang berikut:

$.browser.device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));
Salin selepas log masuk

Ini akan dilanjutkan objek $.browser dengan sifat "peranti" yang menunjukkan sama ada peranti mudah alih sedang digunakan.

Nota: Kaedah $.browser jQuery yang disertakan telah dialih keluar dalam jQuery v1.9.1 . Jika anda perlu menggunakan kaedah ini, anda boleh memasang pemalam migrasi jQuery, yang menyediakan lapisan keserasian untuk versi jQuery yang lebih lama.

Pendekatan yang lebih teliti:

var isMobile = false; // Initialize as false
if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) 
    || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) {
  isMobile = true;
}
Salin selepas log masuk

Versi ini menyediakan mekanisme pengesanan yang lebih teliti, meliputi rangkaian peranti mudah alih yang lebih luas.

Ingat, menggunakan pengesanan ejen pengguna bukanlah amalan yang disyorkan untuk aplikasi web moden kerana had dan ketidaktepatannya. Pertimbangkan untuk menggunakan pengesanan ciri atau pertanyaan media sebaliknya, jika boleh.

Atas ialah kandungan terperinci Bagaimanakah saya boleh mengesan jika pengguna menggunakan peranti mudah alih menggunakan jQuery?. 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