تصميم الموقع التفاعلي - رؤية الموقع

ما هو viewport؟

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

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

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

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

ليس هذا مثالًا مثاليًا! إنه مجرد تصحيح سريع.

ضبط viewport

أدخل HTML5 طريقة تجعل مصممي الويب يمكنهم <meta> العلامات لتحكم viewport.

يجب أن تحتوي جميع صفحات الويب على ما يلي <meta> عنصر viewport:

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

يقدم التعليمات للمتصفح حول كيفية التحكم في حجم الصفحة وتدرج التكبير.

width=device-width يُحدد بعض الإعدادات لعرض عرض الصفحة على عرض الشاشة للجهاز (باعتماد الجهاز).

عند أول تحميل للصفحة من قبل المتصفح،initial-scale=1.0 إعداد بعض القيم الافتراضية للتكبير.

فيما يلي أمثلة على صفحات الويب بدون علامة التبويب meta وصفحات الويب التي تحتوي على علامة التبويب meta:

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



بدون علامة التبويب viewport


باستخدام علامة التبويب viewport

تأكد من ضبط المحتوى بحيث يتماشى مع حجم النافذة المرئية

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

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

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

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

2. لا تدع المحتوى يعتمد على عرض واجهة معينة للحصول على تأثير جيد - نظرًا لتفاوت أبعاد الشاشة وعرض الشاشة المعتمدة على بكسل بين الأجهزة، لا يجب أن يعتمد المحتوى على عرض واجهة معينة للحصول على تأثير جيد.

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