73-تصميم الويب الاستجابة – منطقة العرض (Viewport)

ما المقصود بمنطقة العرض (Viewport)؟

منطقة العرض (Viewport) هي المساحة المرئية للمستخدم لصفحة الويب.

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

ضبط منطقة العرض

عرف HTML5 طريقة جديدة تتيح لمصممي الويب التحكم في منطقة العرض، وذلك من خلال الوسيطة <meta>.

يجب عليك تضمين عنصر viewport التالي من <meta> في جميع صفحات الويب الخاصة بك:

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

يعطي هذا الأمر المتصفح إرشادات حول كيفية التحكم في أبعاد الصفحة وتغيير حجمها.

• يحدد الجزء width=device-width عرض الصفحة ليتبع عرض شاشة الجهاز (والذي يختلف حسب الجهاز).
• يحدد الجزء initial-scale=1.0 مستوى التكبير الأولي عند تحميل الصفحة لأول مرة بواسطة المتصفح.

فيما يلي مثال على صفحة ويب بدون وسم viewport meta tag، وصفحة الويب نفسها مع وسم viewport meta tag:

بدون وسم viewport meta tag

مع وسم viewport meta tag

تناسب محتوى الصفحة مع منطقة العرض

اعتاد المستخدمون على التمرير العمودي في مواقع الويب على كل من أجهزة سطح المكتب والมือ الجوال – ولكن ليس التمرير الأفقي!

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

بعض القواعد الإضافية التي يجب اتباعها:

1. لا تستخدم عناصر ذات عرض ثابت كبير: على سبيل المثال، إذا تم عرض صورة بعرض أكبر من منطقة العرض، فقد تتسبب في تمرير منطقة العرض أفقيًا. تذكر تعديل هذا المحتوى ليلائم عرض منطقة العرض.
2. لا تجعل المحتوى يعتمد على عرض معين لمنطقة العرض ليعرض بشكل جيد: نظرًا لأن أبعاد الشاشة وعرضها في وحدات البكسل الخاصة بـ CSS تختلف اختلافًا كبيرًا بين الأجهزة، يجب ألا يعتمد المحتوى على عرض معين لمنطقة العرض ليعرض بشكل جيد.
3. استخدم استعلامات الوسائط CSS لتطبيق أنماط مختلفة للشاشات الصغيرة والكبيرة: يؤدي تعيين أبعاد CSS مطلقة كبيرة لعناصر الصفحة إلى جعل العنصر عريضًا جدًا بالنسبة لمنطقة العرض على جهاز أصغر. بدلاً من ذلك، فكر في استخدام قيم العرض النسبية، مثل width: 100%. أيضًا، كن حذرًا من استخدام قيم تحديد المواضع المطلقة الكبيرة. فقد يؤدي ذلك إلى خروج العنصر من منطقة العرض على الأجهزة الصغيرة.