responsive-design

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

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

ما هو الكشف عن الأجهزة المحمولة في جافا سكريبت؟

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

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

كان أسلوب الكشف عن الأجهزة المحمولة في السابق يعتمد بشكل كبير على سلسلة وكيل المستخدم، وهي معرف نصي يرسله المتصفح. لسنوات، كان المطورون يحللون هذه السلسلة ليخمنوا ما إذا كان الجهاز iPhone، هاتف Android، iPad، أم متصفح سطح مكتب. لا يزال ذلك الأسلوب موجودًا، ولكنه أصبح أقل موثوقية مما كان. تقليل أو توحيد البيانات الخاصة بوكيل المستخدم في المتصفحات تزايد بسبب الأسباب الخاصة بالخصوصية والتوافق. راجع أكثر عن سلسلة وكيل المستخدم على MDN: سِلسلة وكيل المستخدم.

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

لماذا لا يزال المطورون يستخدمون الكشف عن الأجهزة المحمولة

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

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

الكشف عن الجهاز مقابل الكشف عن القدرات

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

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

الجوانب الرئيسية للكشف عن الأجهزة المحمولة في جافا سكريبت

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

الكشف عن وكيل المستخدم

لا يزال الكشف عن وكيل المستخدم مستخدمًا على نطاق واسع لأنه بسيط ومألوف. في JavaScript، غالبًا ما يفحص المطورون navigator.userAgent ويبحثون عن علامات مثل Android أو iPhone أو iPad.

function isMobileByUserAgent() {
  return /Android|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i.test(
    navigator.userAgent
  );
}

console.log(isMobileByUserAgent());

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

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

الكشف عن نافذة العرض وحجم الشاشة

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

function isSmallViewport() {
  return window.innerWidth <= 768;
}

console.log(isSmallViewport());

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

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

الكشف عن قابلية اللمس

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

function supportsTouch() {
  return (
    'ontouchstart' in window ||
    navigator.maxTouchPoints > 0 ||
    navigator.msMaxTouchPoints > 0
  );
}

console.log(supportsTouch());

هذا يعمل بشكل أفضل عندما تكون تجيب عن سؤال تفاعل محدد. إذا كنت تحتاج إلى أهداف لمس أكبر، إيماءات سحب، أو سلوك سحب مُكيّف لللمس، فهذا التحقق يمكن أن يساعد. إذا كنت تحاول معرفة ما إذا كان الزائر “محمولًا”، فهو عام للغاية بمعزل عن غيره.

استعلامات الوسائط في جافا سكريبت

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

const mobileQuery = window.matchMedia('(max-width: 768px)');

function handleViewportChange(e) {
  if (e.matches) {
    console.log('Likely mobile-sized viewport');
  } else {
    console.log('Larger viewport');
  }
}

handleViewportChange(mobileQuery);
mobileQuery.addEventListener('change', handleViewportChange);

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

الكشف عن المؤشر والتحويم

استراتيجية أكثر حداثة وقد لا تُلاحظ كثيراً هي فحص سلوك الإدخال. هذا مهم لأن العديد من مشاكل تجربة المستخدم الخاصة بالهواتف المحمولة هي في الواقع مشاكل إدخال.

const hasCoarsePointer = window.matchMedia('(pointer: coarse)').matches;
const supportsHover = window.matchMedia('(hover: hover)').matches;

console.log({ hasCoarsePointer, supportsHover });

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

الكشف عن الطرق الشائعة للمقارنة

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

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

لماذا غالباً ما يكون هدف “المحمول” خاطئاً

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

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

كيف تبدأ مع الكشف عن الأجهزة المحمولة في جافا سكريبت

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

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

ابدأ بالتصميم المتجاوب أولاً

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

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

استخدم اكتشاف الميزات لتغييرات السلوك

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

إليك مثال عملي يكيف تفاعل القوائم بناءً على دعم التحويم:

const canHover = window.matchMedia('(hover: hover)').matches;

const menuButton = document.querySelector('.menu-button');
const menu = document.querySelector('.menu');

if (canHover) {
  menuButton.addEventListener('mouseenter', () => {
    menu.classList.add('open');
  });

  menuButton.addEventListener('mouseleave', () => {
    menu.classList.remove('open');
  });
} else {
  menuButton.addEventListener('click', () => {
    menu.classList.toggle('open');
  });
}

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

اجمَع الإشارات عند اللزوم

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

function isLikelyMobile() {
  const smallScreen = window.matchMedia('(max-width: 768px)').matches;
  const coarsePointer = window.matchMedia('(pointer: coarse)').matches;
  const mobileUA = /Android|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i.test(
    navigator.userAgent
  );

  return smallScreen && (coarsePointer || mobileUA);
}

console.log(isLikelyMobile());

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

راقب تغيّر الحجم والاتجاه

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

function updateDeviceState() {
  const mobileSized = window.matchMedia('(max-width: 768px)').matches;
  document.body.classList.toggle('mobile-sized', mobileSized);
}

window.addEventListener('resize', updateDeviceState);
window.addEventListener('orientationchange', updateDeviceState);
updateDeviceState();

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

تجنب الأخطاء الشائعة في التنفيذ

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

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

إعداد عملي لمعظم المواقع

لكثير من مواقع الأعمال وتطبيقات الويب، يبدو النهج المعقول كما يلي:

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

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

اختبار منطق الكشف عن المحمول

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

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

خاتمة

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

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

الوسم: responsive-design

الكشف عن الأجهزة المحمولة في جافا سكريبت — مبني على القدرات أولاً