منطقة العرض (Viewport)

منطقة العرض (Viewport) هي المساحة المرئيّة من صفحة الويب أو التطبيق على شاشة المستخدم في أيّ لحظة. على جهاز الكمبيوتر المكتبيّ، تُقابل منطقة العرض نافذة المتصفّح مطروحاً منها أشرطة الأدوات وأشرطة التمرير وعناصر واجهة المتصفّح. وعلى الأجهزة اللوحيّة والهواتف الذكيّة، تكون منطقة العرض هي كامل مساحة الشاشة التي يستطيع المتصفّح استخدامها. وتُحدّد منطقة العرض كيفيّة تحجيم المحتوى وتخطيطه وعرضه للقارئ. ففي HTML، يُخبر وسم `<meta name="viewport">` المتصفّحَ بكيفيّة التحكّم في أبعاد الصفحة وتحجيمها، وهو أساس [التصميم المتجاوب](/glossary/responsive-design).

المحتوى الذي يتجاهل اختلافات منطقة العرض يقدّم تجربة قراءة سيّئة على بعض الأجهزة. فقد يكون النصّ صغيراً يصعب قراءته على الهواتف، أو الأزرار يستحيل النقر عليها، أو قد يلزم تمرير أفقيّ لرؤية الصفحة كاملةً. وبما أنّ الأجهزة المحمولة تستحوذ الآن على معظم حركة الويب، فإنّ المنشورات التي تخفق في التكيّف مع أحجام مناطق العرض المختلفة تخسر القرّاء وتبدو غير احترافيّة. كما تأخذ محرّكات البحث ملاءمة الجوّال في الحسبان عند ترتيب النتائج، ولذا يؤثّر التعامل السليم مع منطقة العرض في تجربة المستخدم وإمكانيّة الاكتشاف معاً.

منشورات FlipLink متجاوبة بالكامل وتتكيّف تلقائيّاً مع أيّ حجم لمنطقة العرض. فعارض الكتاب التفاعلي يكتشف أبعاد منطقة العرض المتاحة ويُعدّل عرض الصفحة ومواضع عناصر التحكّم ومستويات التكبير وفقاً لذلك. وعلى مناطق العرض العريضة في سطح المكتب، تُعرض المنشورات في [نمط الصفحتين المتجاورتين](/glossary/page-spread). وعلى مناطق العرض الضيّقة في الهاتف المحمول، تتحوّل إلى عرض الصفحة الواحدة بتنقّل ملائم للّمس. وتتيح إعدادات [تجربة الصفحة وتخطيطها](/features/page-experience-and-layout) للناشرين الاختيار بين أوضاع تخطيط مختلفة، ويتولّى FlipLink حسابات منطقة العرض ليبقى المحتوى مقروءاً ومتناسقاً. وحين تُضمّن كتاباً تفاعليّاً باستخدام شيفرة [التضمين المتجاوب](/features/sharing-and-distribution)، فإنّه يملأ حاويته تلقائيّاً ويستجيب لتغيّرات منطقة العرض — بما في ذلك تدوير الجهاز — دون أيّ تهيئة إضافيّة.

تُتحكَّم منطقة العرض بواسطة وسم HTML الوصفيّ `<meta name="viewport" content="width=device-width, initial-scale=1">`. ويُخبر هذا الوسم المتصفّحَ بأن يجعل عرض الصفحة مساوياً لعرض شاشة الجهاز وأن يبدأ بمستوى تكبير ١x. وبدونه، تعرض متصفّحات الهاتف المحمول الصفحات بعرض افتراضيّ يقارب ٩٨٠ بكسل ثمّ تُصغّر النتيجة لتلائم الشاشة، ما يجعل النصّ صغيراً والتفاعل صعباً. تشمل الخصائص الرئيسيّة لمنطقة العرض ما يلي: - **width**: يُحدّد عرض منطقة العرض. وتُطابق القيمة `device-width` العرض الفعليّ للشاشة بوحدات بكسل CSS. - **initial-scale**: يتحكّم في مستوى التكبير عند تحميل الصفحة لأوّل مرّة. القيمة `1` تعني عدم تكبير. - **maximum-scale** و**user-scalable**: تتحكّمان في إمكانيّة تكبير المستخدمين بالقرص. وتوصي إرشادات إمكانيّة الوصول بالسماح بالتكبير. - **viewport-fit**: على الأجهزة ذات الثغرات أو الزوايا الدائريّة، تمتدّ القيمة `viewport-fit=cover` بالمحتوى إلى المنطقة الآمنة. تستخدم استعلامات وسائط CSS أبعاد منطقة العرض لتطبيق أنماط مختلفة. فمثلاً، `@media (max-width: 768px)` يستهدف مناطق العرض الأضيق من 768 بكسل CSS، وهو نقطة فاصلة شائعة للانتقال من اللوحيّ إلى المحمول.

**«منطقة العرض ودقّة الشاشة شيء واحد.»** ليس كذلك. فقد يكون لهاتف ما دقّة شاشة 1170 × 2532 بكسل ماديّ، لكنّ منطقة عرضه 390 × 844 بكسل CSS. وتسدّ نسبة بكسل الجهاز (DPR) الفجوة — فعلى ذلك الهاتف تساوي DPR ‏3، أي إنّ كلّ بكسل CSS يُقابله 9 بكسلات ماديّة. ويعمل المصمّمون ببكسلات CSS (منطقة العرض) لا بالدقّة الماديّة. **«ضبط `user-scalable=no` يُحسّن التجربة.»** منع التكبير يكسر إمكانيّة الوصول للمستخدمين ذوي ضعف البصر. وتُصنّف معايير الويب الحديثة والكثير من مراجعات إمكانيّة الوصول هذا الإعداد على أنّه إخفاق. ويسمح عارض FlipLink بالتكبير بالقرص افتراضيّاً مع الحفاظ على سلامة التخطيط. **«أحجام منطقة العرض على سطح المكتب متماثلة.»** تتفاوت مناطق العرض على سطح المكتب تفاوتاً كبيراً. فقد يكون لمستخدم بشاشة ٢٧ بوصة وأدوات مطوّر المتصفّح مفتوحةً منطقة عرض ضيّقة حتى 900 بكسل — في نطاق الأجهزة اللوحيّة تماماً. ويجب أن تتكيّف المنشورات المتجاوبة مع الأبعاد الفعليّة لمنطقة العرض، لا مع فئات الأجهزة المفترَضة.

منطقة العرض هي النافذة التي يرى القرّاء من خلالها محتواك. والمنشورات التي تستجيب لحجم منطقة العرض تقدّم تجربة متّسقة واحترافيّة على كلّ جهاز — من هاتف بشاشة ٤ بوصات إلى شاشة سطح مكتب بحجم ٣٢ بوصة — دون أن يلحظ القارئ التكيّف الجاري إطلاقاً.