كيفية اكتشاف متصفحات الجوال باستخدام JavaScript

لطالما كان اكتشاف الأجهزة المحمولة جانبًا حاسمًا في تطوير التطبيقات. إنه مناسب لكل من التطبيقات ، وكذلك البرامج والمواقع الإلكترونية. هناك أسباب لا حصر لها للتحقق من وكلاء متصفح الجوال. الأهم من ذلك ، القدرة على تقديم تجربة فريدة للمستخدم.

تحصل مكتبة UAParser.js وحدها على ملايين التنزيلات الأسبوعية للحزم. وفي معظم الحالات ، يكفي أن تقوم ببناء شيء ما من الصفر. ولكن ، ماذا عن الطرق البديلة لاكتشاف متصفحات الجوال باستخدام JavaScript؟

في بعض الأحيان قد ترغب فقط في حل بسيط يقوم بالمهمة بدون أي مكتبات. وفي هذه المقالة ، سوف أعرض لك عددًا قليلاً من تقنيات JavaScript لاكتشاف مستخدمي الأجهزة المحمولة. اسمحوا لي أن أعرف إذا فاتني أي!

الملاح.userAgent

الكأس المقدسة لاكتشاف المتصفح هي خاصية navigator.UserAgent.

 if (https://c6c8j7x5.rocketcdn.me/Android|iPhone/i.test(navigator.userAgent)) { // This checks if the current device is in fact mobile } // an alternative structure to check individual matches if ( navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/iPhone/i) ) { // making individual checks }

هذه ، بالطبع ، طريقة بدائية للغاية للقيام بذلك. يمكن التلاعب بها بسهولة حيث يمكن انتحال خاصية User-Agent. ولكن ، نظرًا لأنه يؤدي المهمة ، فلا يزال بإمكانك استخدامه في مجموعة متنوعة من المشاريع. على سبيل المثال ، الصفحات المقصودة أو إجراء إعادة توجيه مخصصة إلى نسخة محمولة.

كيفية استخدام navigator.userAgent لاكتشاف نوع المتصفح وعرض المحتوى بناءً على المتصفح المحدد؟

حسنًا ، قد تكون هناك حالة استخدام فريدة حيث تريد اكتشاف متصفح معين ، مثل Chrome و Firefox (أو في هذه الحالة ، Android و iPhone) ، ثم استخدام تلك البيانات لعرض محتوى معين. غالبًا ما يستخدم هذا الأسلوب لتوفير / تغيير روابط التنزيل لمتصفحات معينة.

في مثل هذه الحالة ، يمكنك استخدام الوظيفة التالية.

 function detectBrowser() { let userAgent = navigator.userAgent; let browserName; if (userAgent.match(/chrome|chromium|crios/i)) { browserName = "Chrome"; } else if (userAgent.match(/firefox|fxios/i)) { browserName = "Firefox"; } else if (userAgent.match(/safari/i)) { browserName = "Safari"; } else if (userAgent.match(/opr\//i)) { browserName = "Opera"; } else if (userAgent.match(/edg/i)) { browserName = "Edge"; } else if (userAgent.match(/android/i)) { browserName = "Android"; } else if (userAgent.match(/iphone/i)) { browserName = "iPhone"; } else { browserName = "Unknown"; } document.querySelector("div.form-style h3").innerText = "You are browsing with: " + browserName + ""; }

يمكنك التعليق على العبارات المختلفة else if للمتصفحات التي لا تريد التحقق منها ، وبالمثل - يمكنك إضافة متصفحات إضافية تريد التحقق منها.

TouchEvent

تتمثل إحدى طرق اكتشاف مستخدمي الأجهزة المحمولة في التحقق مما إذا كان الجهاز يحتوي على شاشة تعمل باللمس.

باستخدام خاصية GlobalEventHandlers.ontouchstart ، يمكنك إجراء فحص بسيط لمعرفة كيفية تفاعل المستخدم مع تطبيقك. إذا جاء التفاعل من شاشة تعمل باللمس ، فيمكنك حينئذٍ إعادة إصدار الهاتف المحمول من التطبيق أو الصفحة.

 if ("ontouchstart" in document.documentElement) { // content for touch-screen (mobile) devices } else { // everything else (desktop) }

لا تحتوي الأجهزة التي تعمل بشاشة تعمل باللمس مثل Surface على هذه الخاصية. لذلك ، سيستمر المستخدمون القادمون من أجهزة تعمل باللمس على سطح المكتب في رؤية إصدار سطح المكتب لصفحاتك.

Window.matchMedia ()

يعد Window.matchMedia () أحد أفضل الخصائص لاكتشاف مستخدمي الأجهزة المحمولة باستخدام JavaScript. وهذا لأنه يتيح لك التفاعل مع CSS مباشرة.

في كثير من الحالات ، تكون الاستعلامات عن الوسائط متفوقة لأنها تحتوي على أدوات مدمجة للكشف عن الأجهزة المحمولة. على سبيل المثال ، يمكنك إجراء مكالمة للتحقق مما إذا كانت "pointer: coarse" صحيحة.

تتحقق هذه العبارة المحددة من صحة مؤشر الجهاز جيدًا أو خشن .

 let isMobile = window.matchMedia("(pointer:coarse)").matches;

بدلاً من ذلك ، قد يحتوي الجهاز على مؤشر دقيق وخشن. بالنسبة لحالة الاستخدام هذه ، يمكننا التحقق مما إذا كانت أي مؤشرات خشنة.

 let isMobile = window.matchMedia("(any-pointer:coarse)").matches;

ضع في اعتبارك أن هذا يتحقق فقط من صحة الاستعلام على أنه صواب أو خطأ. هناك طريقة أكثر دقة للتحقق من الأجهزة المحمولة وهي استخدام استعلامات الوسائط مباشرة.

 let isMobile = window.matchMedia("only screen and (max-width: 480px)").matches;

سيتحقق هذا الاستعلام مباشرة من أقصى عرض للجهاز ويؤكد ما إذا كان يطابق المعايير أم لا. مرة أخرى ، هذا كثير من العمل للحصول على جميع الأجهزة بشكل صحيح. على هذا النحو ، من الأسهل استخدام مكتبة سابقة الإنشاء مع تحديد جميع أنواع الأجهزة بالفعل.

مفيد في سياقات معينة

على مر السنين ، كان هناك العديد من خصائص JavaScript لاكتشاف أنواع الأجهزة. تم إهمال عدد كبير منهم ، ولكن تم دمج معظمهم في المكتبات. والذي يعد أيضًا أفضل طريقة للقيام بالكشف المناسب للهاتف المحمول.

أخيرًا وليس آخرًا ، تتضمن معظم الأطر الحديثة بالفعل اكتشاف الأجهزة المحمولة كجزء من إطار العمل نفسه. يجدر النظر إذا كنت لا تريد القيام بكل الأعمال القانونية.

مكتبات لكشف الأجهزة المحمولة

بالنسبة لهذا القسم ، سأقوم بإدراج مكتبات JavaScript الأكثر شيوعًا لاكتشاف الأجهزة المحمولة. مرة أخرى ، أؤكد أن هذه خاصة بـ JavaScript. ارجع إلى المستندات من أجل التنفيذ الصحيح في تطبيقك.

UAParser.js

بقدر ما تذهب المكتبات الكاملة ، فإن UAParser هو الأفضل. مع أكثر من 10 ملايين عملية تنزيل أسبوعية على npm وحدها - UAParser هو الحل الفعلي لاكتشاف الأجهزة المحمولة. كما يعطيها الاسم بعيدًا - تعمل المكتبة عن طريق تحليل سلاسل User-Agent.

ومع ذلك ، فإن ما يجعله شائعًا للغاية هو حقيقة أنه يمكنك تحليل مئات الأشكال المختلفة للجهاز. وكلها موثقة جيدًا. يمكنك الانتقال من بائعي الأجهزة العمليين إلى أنماط اكتشاف أكثر تعقيدًا مثل بنية وحدة المعالجة المركزية.

mobile-detect.js

هذا منفذ مباشر إلى حد ما من مكتبة Mobile Detect لـ PHP ، تم توفيره للمجتمع بواسطة Heinrich Goebl. تستخدم المكتبة نفسها User-Agent للكشف ، لذلك كما ناقشنا سابقًا - ليس الخيار الأفضل.

ومع ذلك ، يجب أن تقوم بالمهمة عندما يتعلق الأمر بقوالب HTML العملية أو مشاريع المحفظة.

isMobile

هنا لدينا عرض آخر على خاصية User-Agent Navigator من Kai Mallea. بينما لا يزال حلاً مبسطًا ، إلا أنني أحب ذلك ، حيث يوفر Mobile مجموعة متنوعة من المواصفات. على سبيل المثال ، يمكنك اختبار أي أجهزة محمولة أو أجهزة محددة مثل الهاتف أو الجهاز اللوحي .

رد فعل الجهاز كشف

هل أنت مطور React.js؟

ثم هذه المكتبة من مايكل لاكيتيونوف لك. إنه يعمل كما تتوقع - تكتشف المكتبة أولاً نوع الجهاز ، ثم تعرض طريقة العرض بناءً على هذا النوع. يعمل بشكل لا تشوبه شائبة مع تكامل المكونات ، ويمكن تخصيصه بشكل أكبر من خلال استدعاءات API.

حقيقة واحدة مثيرة للاهتمام هي عدد المحددات التي تتضمنها هذه المكتبة. إنه يغطي أجهزة مثل التلفزيونات الذكية ، والأجهزة القابلة للارتداء ، ومجموعة متنوعة من أجهزة iPhone ، وأكثر من ذلك بكثير. يمنحك هذا مجموعة واسعة من خيارات التصميم عند إنشاء تطبيق لجهاز معين.