ما معنى viewport؟

طريقة الاستخدام

تحتاج الصفحات المتجاوبة إلى وسم meta للعرض (width=device-width, initial-scale=1). وتمثل وحدتا CSS ‏vw وvh نسبتين من عرض منفذ العرض وارتفاعه، وتعني عبارة «فوق الطية» ما يظهر ضمن مساحة العرض الأولى.

أمثلة

1. Without the viewport meta tag, the phone shows a tiny desktop version of the page.

   من دون وسم meta الخاص بمنفذ العرض، يعرض الهاتف نسخة سطح المكتب مصغّرة جدًا من الصفحة.

   لا يعرف المتصفح عرض الشاشة الحقيقي، فيعاملها كما لو كانت شاشة حاسوب ثم يصغّر الصفحة بأكملها.

2. The hero image should fill the whole viewport on desktop.

   ينبغي أن تملأ الصورة الرئيسية منفذ العرض كاملًا على الحاسوب.

   المطلوب أن تمتد الصورة لتغطي المساحة المرئية كلها ضمن نافذة المتصفح على سطح المكتب.

تراكيب شائعة

• viewport meta tag
• viewport width
• small viewports
• fill the viewport

مصطلحات ذات صلة

• responsive designتصميم متجاوب
• media queryاستعلام وسائط
• breakpointنقطة توقف
• meta tagوسم meta

معنى الكلمة في مجالات أخرى

قد يختلف معنى الكلمة الإنجليزية نفسها من مجال إلى آخر:

• viewport · تطوير البرمجيات

مصطلحات أخرى: CSS وتنسيق الصفحات

• CSS · لغة تنسيق صفحات الويب CSS
• selector · محدِّد CSS
• property · خاصية CSS
• stylesheet · ورقة أنماط
• layout · تخطيط الصفحة
• flexbox · Flexbox
• CSS grid · شبكة CSS
• box model · نموذج الصندوق
• margin · هامش خارجي
• padding · حشو داخلي
• specificity · درجة تخصيص محدد CSS