تصميم الويب سريع الاستجابة - منفذ العرض
ما هو منفذ العرض؟
منفذ العرض هو المنطقة المرئية للمستخدم لصفحة الويب.
يختلف إطار العرض باختلاف الجهاز ، وسيكون أصغر على الهاتف المحمول منه على شاشة الكمبيوتر.
قبل الأجهزة اللوحية والهواتف المحمولة ، كانت صفحات الويب مصممة فقط لشاشات الكمبيوتر ، وكان من الشائع أن يكون لصفحات الويب تصميم ثابت وحجم ثابت.
بعد ذلك ، عندما بدأنا في تصفح الإنترنت باستخدام الأجهزة اللوحية والهواتف المحمولة ، كانت صفحات الويب ذات الحجم الثابت كبيرة جدًا بحيث لا تتناسب مع إطار العرض. لإصلاح ذلك ، قامت المتصفحات الموجودة على تلك الأجهزة بتقليص حجم صفحة الويب بالكامل لتناسب الشاشة.
لم يكن هذا مثاليا !! لكن حل سريع.
إعداد منفذ العرض
قدم HTML5 طريقة للسماح لمصممي الويب بالتحكم في إطار العرض ، من خلال
<meta>العلامة.
يجب عليك تضمين <meta>عنصر منفذ العرض التالي في جميع صفحات الويب الخاصة بك:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
يوفر هذا إرشادات للمتصفح حول كيفية التحكم في أبعاد الصفحة وقياسها.
يضبط الجزء width=device-widthعرض الصفحة لتتبع عرض شاشة الجهاز (والذي سيختلف تبعًا للجهاز).
يضبط الجزء initial-scale=1.0مستوى التكبير الأولي عند تحميل الصفحة لأول مرة بواسطة المتصفح.
فيما يلي مثال لصفحة ويب لا تحتوي على العلامة الوصفية لإطار العرض ، ونفس صفحة الويب التي تحتوي على العلامة الوصفية لإطار العرض:
نصيحة: إذا كنت تتصفح هذه الصفحة بهاتف أو كمبيوتر لوحي ، فيمكنك النقر فوق الرابطين أعلاه لمعرفة الفرق.
حجم المحتوى في منفذ العرض
يتم استخدام المستخدمين لتمرير مواقع الويب عموديًا على كل من أجهزة سطح المكتب والأجهزة المحمولة - ولكن ليس أفقيًا!
لذلك ، إذا اضطر المستخدم إلى التمرير أفقيًا ، أو التصغير لرؤية صفحة الويب بأكملها ، فسيؤدي ذلك إلى تجربة مستخدم سيئة.
بعض القواعد الإضافية التي يجب اتباعها:
1. لا تستخدم عناصر كبيرة ثابتة العرض - على سبيل المثال ، إذا تم عرض صورة بعرض أوسع من إطار العرض ، فقد يتسبب ذلك في تمرير إطار العرض أفقيًا. تذكر أن تضبط هذا المحتوى ليناسب عرض إطار العرض.
2. لا تدع المحتوى يعتمد على عرض إطار عرض معين حتى يتم عرضه جيدًا - نظرًا لأن أبعاد الشاشة وعرضها في وحدات بكسل CSS يختلفان اختلافًا كبيرًا بين الأجهزة ، يجب ألا يعتمد المحتوى على عرض إطار عرض معين للعرض بشكل جيد.
3. استخدم استعلامات وسائط CSS لتطبيق أنماط مختلفة للشاشات الصغيرة والكبيرة - سيؤدي تعيين عروض CSS مطلقة كبيرة لعناصر الصفحة إلى جعل العنصر عريضًا جدًا بالنسبة لإطار العرض على جهاز أصغر. بدلاً من ذلك ، جرب استخدام قيم العرض النسبية ، مثل العرض: 100٪. كن حذرا أيضا من استخدام قيم تحديد المواقع المطلقة الكبيرة. قد يتسبب ذلك في سقوط العنصر خارج إطار العرض على الأجهزة الصغيرة.