نافذة عرض المستخدم في لغة CSSCSS Responsive Viewport

• viewport علي شاشة computer هي بعرض شاشة الكمبيوتر و viewport علي شاشة phone هي بعرض شاشة phone.

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

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

خطوات إضافة viewport لصفحة الويب:

• يتم إضافة عنصر meta tag بداخل عنصر head لأي صفحة ويب.
• إضافة خاصية name لعنصر meta tag بالقيمة viewport ليصبح بهذا الشكل name="viewport".
• إضافة خاصية content لعنصر meta tag بالقيمة "width="device-width, initial-scale=1 ليصبح بهذا الشكل "content="width=device-width, initial-scale=1.

عنصر meta tag مع viewport يخبر المتصفح أن wrapping تلتف العناصر بحسب حجم الشاشة width=device-width تتمدد العناصر للأسفل في صفوف أو سطور جديدة عندما لا توجد مساحات لها داخل viewport كل شاشة لها عرض مختلف لعناصر صفحة الويب.

initial-scale=1.0 هي خاصة بتحديد القيمة الأولية التي سوف تعتمد عليها صفحة الويب عندما تقوم بالتحميل اول مرة.

يجب مراعاة عدم ظهور scroll أفقياً لصفحات الويب الناتج عن طفح المحتوي خارج حدود viewport والذي يؤي في النهاية إلي تجربة مستخدم سيئة.

هناك بعض القواعد التي يجب اتباعها لتحسين تجربة المستخدم مع viewport:

1. لا تستخدم عناصر كبيرة ثابتة العرض:

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

2. لا تدع المحتوى يعتمد على عرض viewport  معين حتى يتم عرضه جيدًا:

نظرًا لأن أبعاد الشاشة وعرضها في وحدات بكسل CSS تختلف اختلافًا كبيرًا بين الأجهزة ، يجب ألا يعتمد المحتوى على عرض viewport معين للعرض بشكل جيد.

3. استخدم خصائص CSS لتطبيق أنماط مختلفة للشاشات الصغيرة والكبيرة:

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