انتقل إلى محتوى الدرس

Browser Viewport Mental Model مفهوم نافذة العرض المرئية

اضبط وسم نافذة العرض القياسي لبناء صفحات CSS متجاوبة وميّز بين البكسل المنطقي والفيزيائي واستخدم وحدات النافذة الحديثة مع الحفاظ على إمكانية التكبير.
3 صفوف تعليمية
لغة CSS
5,168 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

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

عندما ظهرت الهواتف الذكية لأول مرة كانت معظم مواقع الإنترنت مصممة لشاشات مكتبية عريضة؛ ولتجنب اقتصاصها افترضت متصفحات الهواتف وجود شاشة افتراضية بعرض 980px ثم صغّرت الصفحة بالكامل لتنحشر داخل الشاشة الصغيرة، فتبدو النصوص والأزرار ضئيلة للغاية ولا تُقرأ إلا بالتكبير اليدوي.

الصف 2 صورة توضيحية
مخطط يقارن بين تصغير الصفحة الوهمي بعرض 980px عند غياب وسم نافذة العرض وبين القياس الحقيقي المريح عند تفعيله
الصف 3 ملاحظة هامة