كيفية اختبار توافق تصميم الويب سريع الاستجابة عبر المستعرضات

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

ظلت العملية قابلة للتطبيق حيث استمرت أحجام الشاشة في الزيادة من 800 × 600 إلى 1024 × 768 وما بعده. ومع ذلك ، أدى ظهور الهواتف الذكية وإطلاق iPhone في عام 2007 إلى عكس هذا الاتجاه. اليوم، يصل أكثر من نصف المستخدمين إلى صفحات الويب على جهاز محمول أصغر حجمًا.

ملاحظة: من الناحية الفنية ، غالبًا ما تتمتع الهواتف الذكية بدقة أعلى من العديد من الشاشات ، لكن وحدات البكسل الفردية تصبح غير مرئية. يترجم iPhone 11 Max دقة الأجهزة التي تبلغ 2688 × 1242 إلى دقة منطقية أكثر عملية تبلغ 896 × 414. يتم تعيين كل بكسل منطقي إلى شبكة من 3 × 3 بكسلات حقيقية ، مما يتيح خطوطًا أكثر سلاسة وتفاصيل صورة متزايدة.

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

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

كيف يعمل RWD؟

لا يوجد نهج واحد أو تقنية RWD واحدة.

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

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

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

توفر الأقسام التالية عددًا من خيارات التنفيذ الفنية.

لغة البرمجة viewport علامة متغيرة

بغض النظر عن أي تقنية RWD ، العلامة التالية يجب يتم تعيينها في HTML الخاص بك <head>:

<meta name="viewport" content="width=device-width,initial-scale=1">

ال width=device-width يضمن الإعداد أن تقوم مستعرضات الجوال بتوسيع نطاق وحدات بكسل CSS المنطقية حسب عرض الشاشة. بدون ذلك ، سيفترض المستعرض أنه يعرض موقع سطح مكتب ويقيس حجمه وفقًا لذلك حتى يمكن تحريكه وتكبيره.

تساؤلات الإعلام

تساؤلات الإعلام كانت الأساس الأساسي لمواقع RWD الأولى. تسمح لـ CSS باستهداف نطاقات محددة من أبعاد إطار العرض. فمثلا:


p {
  font-size: 1rem;
}


@media (min-width: 900px) and (max-width: 1200px) {

  p {
    font-size: 1.5rem;
  }

}

لا تزال استعلامات الوسائط مستخدمة ، على الرغم من توفر خيارات أقل وضوحًا الآن.

<picture> عناصر

HTML <picture> يستخدم العنصر صيغة استعلام الوسائط للتحكم في الصورة التي يتم عرضها من اختيار <source> خيارات. يُستخدم هذا عادةً للتوجيه الفني لعرض صورة مناسبة لإطار عرض الجهاز. فمثلا:

<picture>

  
  <source  srcset="landscape.jpg"
            media="(min-aspect-ratio:1/1)"
              alt="landscape" />

  
  <img src="portrait.jpg" alt="portrait" />

</picture>

وحدات منفذ عرض CSS

ال vw و vh تمثل وحدات CSS 1٪ من عرض منفذ العرض وارتفاعه على التوالي. vmin هو 1٪ من أصغر أبعاد ، و vmax هو 1٪ من البعد الأكبر.

تسمح هذه بمرونة RWD ، خاصة عند استخدامها بالتزامن مع calc. فمثلا:


p {
  font-size: 1rem + 0.5vw;
}

أعمدة CSS

تخطيطات CSS متعددة الأعمدة توفر طريقة لإنشاء أعمدة نصية متعددة مع زيادة أبعاد الحاوية. فمثلا:


.container {
  columns: 12rem auto;
  column-gap: 2rem;
}

CSS Flexbox والشبكة

فليكس بوكس ​​CSS و شبكة CSS توفير التقنيات الحديثة التي تحدد العناصر الفرعية حسب محتواها والمساحة المتاحة. الاختلاف الأساسي:

  • يستخدم Flexbox للتخطيطات أحادية البعد. يمكن أن تلتف العناصر (أو لا) إلى السطر التالي حسب الضرورة حتى لا تصطف الأعمدة.
  • الشبكة عبارة عن تخطيطات ثنائية الأبعاد ، وعادةً ما تحتوي على صفوف وأعمدة يمكن تحديدها.

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


.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  grid-gap: 1rem;
}

خيارات JavaScript RWD

يمكن أيضًا استخدام JavaScript لتحديد أبعاد منفذ العرض والتفاعل وفقًا لذلك. فمثلا:


const
  vw = window.innerWidth,
  vh = window.innerHeight;

وبالمثل ، يمكن فحص أبعاد العنصر الفردي باستخدام عرض offsetWidth و الارتفاع، على الرغم من أن طريقة getBoundingClientRect () يمكن إرجاع المزيد من المعلومات بما في ذلك كسور البكسل:

const
  element = document.getElementById('myelement'),
  rect    = element.getBoundingClientRect(),
  ew      = rect.width,
  eh      = rect.height;

يمكن أن تتغير أبعاد النافذة والعنصر عند تدوير الجهاز أو تغيير حجم نافذة المتصفح. ال matchMedia API يمكن تحليل استعلامات وسائط CSS و إطلاق أحداث التغيير:


const mql = window.matchMedia('(min-width: 600px)');


mqTest(mql);


mql.addListener(mqTest);


function mqTest(e) {

  if (e.matches) {
    console.log('viewport is at least 600px width');
  }
  else {
    console.log('viewport is less than 600px width');
  }

}

دعم المتصفح

تقدم تقنيات RWD قبل كل شيء دعمًا جيدًا للمتصفح. أحدث خيار – CSS Grid – هو مدعوم بنسبة 95٪ تقريبًا من المتصفحات المستخدمة اليوم. ومع ذلك ، لا يزال من الضروري اختبار موقعك عبر مجموعة من الأجهزة والدقة والمتصفحات …

اختبار في المتصفح

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

في Firefox ، حدد وضع التصميم سريع الاستجابة من مطور ويب القائمة أو اضغط السيطرة | كمد + تحول + م:

وضع التصميم المستجيب لمتصفح Firefox

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

وضع التصميم المستجيب لمتصفح Firefox

ارجع إلى علامة تبويب المتصفح لعرض الموقع الذي تم تغيير حجمه:

شريط أدوات جهاز Chrome

في Safari ، قم بتمكين إظهار قائمة “تطوير” في شريط القوائم خيار من المتقدمة علامة تبويب المتصفح التفضيلات. قم بتحميل صفحة واختر أدخل وضع التصميم المتجاوب من طور قائمة طعام.

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

  • تقديم القدرات

    سيستخدم المتصفح محرك العرض الخاص به – وليس محرك الجهاز الذي تمت محاكاته. ستعمل ميزة CSS التي تعمل في Firefox على عرض iPhone الذي تمت محاكاته بغض النظر عن الدعم الفعلي. ومع ذلك ، سيُظهر سطح مكتب Chrome تقريبًا معقولًا لنظام Android Chrome ، وسيكون macOS Safari مشابهًا لجهاز iPhone لأنهما يعتمدان على نفس محركات العرض.

  • الأجهزة الأقدم

    لا يمكن أن يؤدي اختبار عرض متصفح iPhone على أحدث إصدار من Safari إلى تمثيل الأجهزة الأقدم ذات أنظمة التشغيل والبرامج القديمة بدقة.

  • شاشات عالية الكثافة

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

  • لمس. اتصال. صلة

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

  • سرعة المعالجة

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

برامج محاكاة أنظمة تشغيل الجوال

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

تشمل محاكيات Android:

Chrome هو الخيار الواضح لمتصفح Android ، ولكن يمكنك أيضًا تثبيته أوبرا ميني، والتي تبرز في الهواتف العادية منخفضة الطاقة.

خيارات iOS محدودة أكثر:

لا يزال لهذه المحاكيات سلبيات:

  • يتطلب البرنامج بعض الخبرة الفنية ويستخدم موارد نظام كبيرة.
  • العديد من خيارات iOS هي المحاكاة. إنها تتكيف مع محرك عرض آخر ولن تكون دقيقة دائمًا.

خدمات الاختبار عبر الإنترنت

تم إنشاء هذا الجزء بالشراكة مع اختبار لامدا. شكرًا لك على دعم الشركاء الذين جعلوا SitePoint ممكنًا.

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

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

اختبار لامدا يوفر أكثر من 2000 مجموعة من الأجهزة ونظام التشغيل والمتصفح. المميزات تضمن:

  • اختبارات localhost الصفحات التي تعمل على جهاز الكمبيوتر الخاص بالتطوير
  • التصحيح باستخدام أدوات المطور المتكاملة
  • اختبار تحديد الموقع الجغرافي من مواقع مختلفة
  • لقطات شاشة تم إنشاؤها تلقائيًا بملء الصفحة عبر أجهزة متعددة
  • متتبع مشكلة مدمج
  • برنامج LT Browser (Windows و macOS و Linux) لاختبار ومقارنة الأجهزة مع إعادة التحميل التلقائي ومزامنة التمرير
  • واجهات برمجة تطبيقات الاختبار الآلي القائمة على السيلينيوم
  • دعم 24/7
  • أ خطة مجانية مع وصول غير محدود من 15 دولارًا شهريًا.

قم بالتسجيل للحصول على حساب LambdaTest مجاني …

اختبار المنظر المباشر

تشمل الخدمات البديلة التي توفر أيضًا اختبارًا مباشرًا وآليًا للهاتف المحمول:

اختبار الجهاز الحقيقي

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

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

يمكن للأجهزة الموجودة على نفس الشبكة الوصول إلى خادم جهاز الكمبيوتر الخاص بك عن طريق إدخال عنوان IP الخاص به في المتصفح. يمكن الحصول على هذا بواسطة ifconfig على macOS و Linux أو ipconfig على نظام التشغيل Windows.

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

  1. على جهاز Android ، حدد خيارات للمطور من إعدادات وتمكين تصحيح أخطاء USB.
  2. قم بتوصيل الجهاز بجهاز الكمبيوتر الخاص بك باستخدام كابل USB مناسب. في المرة الأولى التي تحاول فيها ذلك ، قد يُطلب منك تأكيد الإجراءات على أحد الجهازين أو كلاهما.
  3. قم بتشغيل Chrome على جهاز الكمبيوتر الخاص بك وافتحه في علامة تبويب جديدة. التأكد من اكتشف أجهزة USB ممكّن.
  4. اختياريا ، تعيين ميناء الشحن – على سبيل المثال ، المنفذ 8888 على الجهاز البعيد إلى localhost:8888.
  5. يجب أن يظهر جهازك في القائمة. يمكنك الآن فحص علامة تبويب جديدة أو موجودة والتي تفتح أدوات مطور الجهاز:

جهاز بعيد DevTools

لتصحيح أخطاء Safari لجهاز iPhone ، قم بما يلي:

  1. قم بتوصيل هاتفك بجهاز كمبيوتر Apple الخاص بك.
  2. افتح صفحة الويب التي تريد تصحيحها في Safari على جهاز iPhone الخاص بك.
  3. قم بتشغيل Safari على جهاز الكمبيوتر الخاص بك.
  4. في Safari على الكمبيوتر ، انتقل إلى طور > [your iPhone] > [website to inspect]. سيؤدي هذا إلى فتح أدوات مطور Safari على جهاز الكمبيوتر الخاص بك ، مما يتيح لك تصحيح أخطاء الموقع على جهاز iPhone الخاص بك.

موقع واحد ، عدة مشاهدات

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

المصدر

أضف تعليق