إعدادات الشاشة

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

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

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

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

Dual Screen

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

شرائح إطار العرض

تتوفّر ميزة وسائط تجريبية مصمّمة لرصد ما إذا كان موقعك الإلكتروني يظهر على جهاز ثنائي الشاشة. الاسم المقترح لميزة الوسائط هو viewport-segments. ثمة نوعان منهما: horizontal-viewport-segments وvertical-viewport-segments.

إذا أبلغت ميزة الوسائط horizontal-viewport-segments عن قيمة 2 وvertical-viewport-segments تشير إلى القيمة 1، هذا يعني أنّ المفصّلة على الجهاز يتم تشغيلها من أعلى إلى أسفل، ما يؤدي إلى تقسيم المحتوى إلى لوحتَين متجاورتَين.

@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
  // Styles for side-by-side screens.
}

إذا كانت ميزة الوسائط vertical-viewport-segments تشير إلى قيمة 2 وhorizontal-viewport-segments تشير إلى القيمة 1، سيتم عرض المفصّلة من جانب إلى آخر، ما يؤدي إلى تقسيم المحتوى إلى لوحتَين، إحداهما فوق الأخرى.

@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 1) {
  // Styles for stacked screens.
}

إذا أبلغ كل من vertical-viewport-segments وhorizontal-viewport-segments عن القيمة 1، هذا يعني أنّه يتم عرض الموقع الإلكتروني على شاشة واحدة فقط، حتى إذا كان الجهاز يحتوي على أكثر من شاشة واحدة. وهذا يعني عدم استخدام أيّ استعلام عن الوسائط.

متغيرات البيئة

ولن تساعدك ميزة وسائط "viewport-segments" وحدها في إنشاء تصميم حول هذا المفصّلة المزعجة. أنت بحاجة إلى طريقة لمعرفة حجم المفصّلة. هذا هو المكان الذي يمكن أن تساعد فيه متغيرات environment.

تسمح لك متغيرات البيئة في CSS بمعالجة التسلّلات المحرجة للأجهزة في الأنماط. على سبيل المثال، يمكنك التصميم حول "الثقب" على هاتف iPhone X باستخدام قيَم البيئة safe-area-inset-top وsafe-area-inset-right وsafe-area-inset-bottom وsafe-area-inset-left. يتم تضمين هذه الكلمات الرئيسية في دالة env().

body {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

تعمل متغيرات البيئة مثل الخصائص المخصَّصة. هذا يعني أنه يمكنك تمرير خيار احتياطي في حالة عدم وجود متغير البيئة.

body {
  padding-top: env(safe-area-inset-top, 1em);
  padding-right: env(safe-area-inset-right, 1em);
  padding-bottom: env(safe-area-inset-bottom, 1em);
  padding-left: env(safe-area-inset-left, 1em);
}

لكي تعمل متغيّرات البيئة هذه على هاتف iPhone X، يجب تعديل العنصر meta الذي يحدّد معلومات viewport:

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

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

يتم اقتراح ستة متغيّرات جديدة للشاشات القابلة للطيّ: viewport-segment-width وviewport-segment-height وviewport-segment-top وviewport-segment-left وviewport-segment-bottom وviewport-segment-right.

في ما يلي مثال على تخطيط بعمودين، أحدهما أعرض من الآخر.

@media (min-width: 45em) {
  main {
    display: flex;
    flex-direction: row;
  }
  main article {
    flex: 2;
  }
  main aside {
    flex: 1;
  }
}

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

@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
  main article {
    flex: 1 1 env(viewport-segment-width 0 0);
  }
  main aside {
    flex: 1;
  }
}

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

المستقبل

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

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

التحقق من فهمك

اختبر معلوماتك حول تكوينات الشاشة