في هذا الدرس 6تصفّح المواضيع
تمثل نافذة العرض — Viewport — المساحة المستطيلة المرئية الفعلية التي يظهر بداخلها محتوى صفحة الويب أمام عين المستخدم، مستبعدةً شريط العنوان العلوي وأزرار التنقل الخاصة بالمتصفح.
عندما ظهرت الهواتف الذكية لأول مرة كانت معظم مواقع الإنترنت مصممة لشاشات مكتبية عريضة؛ ولتجنب اقتصاصها افترضت متصفحات الهواتف وجود شاشة افتراضية بعرض 980px ثم صغّرت الصفحة بالكامل لتنحشر داخل الشاشة الصغيرة، فتبدو النصوص والأزرار ضئيلة للغاية ولا تُقرأ إلا بالتكبير اليدوي.
لإلغاء المحاكاة الوهمية لعرض 980px على الهواتف والأجهزة اللوحية، اعتمد معيار HTML5 وسماً قياسياً يوضع دائماً داخل رأس المستند <head> ويتكون من توجيهين أساسيين:
- توجيه
width=device-width: يأمر المتصفح بربط عرض نافذة التخطيط بالعرض المنطقي الحقيقي لشاشة الجهاز، مثل390pxعلى الهاتف أو768pxعلى الجهاز اللوحي. - توجيه
initial-scale=1.0: يضبط مستوى التكبير الابتدائي عند فتح الصفحة لأول مرة بنسبة طبيعية كاملة دون تصغير تلقائي.
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Responsive Viewport</title>
</head>تضم شاشات الهواتف الحديثة أكثر من ألف نقطة ضوئية فيزيائية في عرض قبضة اليد؛ ولو طابق البكسل الواحد في الكود نقطة فيزيائية واحدة لأصبحت حروف حجم 16px مجهرية لا تُرى. لذلك تعتمد CSS على البكسل المنطقي المرجعي مقسوماً على نسبة كثافة الشاشة DPR؛ فهاتف شاشته الفيزيائية 1170px بكثافة ثلاثية يمنح المتصفح عرضاً منطقياً مريحاً قدره 390px.
وتوفر اللغة وحدات مرتبطة بنافذة العرض مباشرة مثل vw و vh، إضافةً إلى الوحدتين الحديثتين svh و dvh اللتين تضبطان ارتفاع الواجهة بدقة مع ظهور أو اختفاء شريط عنوان متصفح الهاتف أثناء التمرير.
.hero-stage {
box-sizing: border-box;
width: 100%;
min-height: 80dvh;
padding: 24px;
background-color: #f2ebf9;
}يمثل وضع وسم نافذة العرض نصف المعادلة فقط؛ فإذا تركت داخل جسم الصفحة صورة أو بطاقة وحيدة بعرض ثابت كبير مثل 700px، سيضطر متصفح الهاتف لتوسيع الصفحة أفقياً وظهور شريط تمرير يفسد التجربة.
اضمن بقاء كافة العناصر داخل حدود النافذة بالالتزام بثلاثية الحماية: تفعيل box-sizing: border-box، وبناء الحاويات بـ width: 100% مع max-width، وتقييد الصور بـ max-width: 100%.
.viewport-card {
box-sizing: border-box;
width: 100%;
max-width: 540px;
padding: 16px;
}
.banner-image {
max-width: 100%;
height: auto;
}تضيف بعض الشروحات القديمة القيمتين user-scalable=no أو maximum-scale=1.0 داخل وسم نافذة العرض لمنع المستخدم من تكبير الشاشة باللمس؛ وهو خطأ هندسي جسيم يجب تجنبه دائماً.
فمنع التكبير يحرم ضعاف البصر وكبار السن من قراءة التفاصيل الدقيقة أو الجداول والرسوم، ويخالف مباشرةً معيار إمكانية الوصول العالمي WCAG 1.4.4 الذي يشترط تمكين القارئ من تكبير المحتوى بنسبة لا تقل عن 200% بحرية تامة.
اعتمد جدول المراجعة القياسي التالي في كل صفحة ويب تبنيها قبل الانتقال إلى كتابة استعلامات الوسائط الشرطية:
| الإعداد أو الوحدة | القاعدة القياسية المعتمدة | الأثر الهندسي والعملي |
|---|---|---|
width=device-width | إلزامي في وسم viewport | يطابق عرض التخطيط مع العرض المنطقي الحقيقي للجهاز |
initial-scale=1.0 | يقترن دائماً بعرض الجهاز | يفتح الصفحة بحجم طبيعي واضح دون تصغير وهمي |
user-scalable=no | ممنوع تماماً في الإنتاج | يمنع ضعاف البصر من التكبير ويخالف معايير الوصول |
width: 100% بدل 100vw | الخيار الآمن للحاويات الكاملة | يمنع ظهور شريط تمرير أفقي بسبب عرض شريط التمرير الرأسي |
min-height: 100dvh | أفضل من height: 100vh الجامدة | يتكيف بسلاسة مع انزلاق شريط عنوان متصفح الهاتف |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
في ملخص الدرس أتقنت ضبط وسم نافذة العرض القياسي داخل رأس المستند، وفهمت الفرق بين البكسل المنطقي والفيزيائي ووحدة dvh وأهمية الحفاظ على حرية التكبير؛ وفي الخطوة التالية سننتقل إلى درس نظام Media Queries في لغة CSS لتطبيق القواعد الشرطية باحترافية عبر مختلف مقاسات الشاشات.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Browser Viewport نافذة العرض المرئية
- المساحة المرئية الفعلية من صفحة الويب داخل نافذة المتصفح والتي تُحسب على أساسها الأبعاد النسبية للعناصر.
- للمراجعة
- 02 CSS Reference Pixel البكسل المنطقي المرجعي
- وحدة قياس منطقية مستقلة عن كثافة الشاشة تعادل عدة بكسلات فيزيائية على الهواتف الحديثة لضمان ثبات وضوح القراءة.
- للمراجعة
- 03 Dynamic Viewport Height الارتفاع الديناميكي للنافذة
- وحدة قياس dvh تمثل 1% من الارتفاع المرئي الحي وتتحدث تلقائياً مع ظهور أو اختفاء أشرطة متصفح الهاتف.
- للمراجعة
- 04 Pinch-to-Zoom Accessibility حرية تكبير الشاشة
- تمكين الزوار من تكبير محتوى الصفحة باللمس بحرية عبر عدم إضافة قيود منع التكبير في وسم نافذة العرض.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 DPR DPR
- Device Pixel Ratio
- النسبة الرياضية بين عدد البكسلات الفيزيائية الحقيقية للشاشة وعدد البكسلات المنطقية في CSS.
- للمراجعة
- 02 WCAG WCAG
- Web Content Accessibility Guidelines
- إرشادات إمكانية الوصول العالمية لمحتوى الويب التي تلزم بإتاحة تكبير النصوص والصفحات لضعاف البصر.
- للمراجعة
- 03 dvh dvh
- Dynamic Viewport Height
- وحدة قياس حديثة في CSS تتبع الارتفاع المرئي الفعلي لنافذة المتصفح على الهواتف الذكية.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
أضف وسم meta باسم viewport داخل عنصر head بقيمة width=device-width مع initial-scale=1.0 دون أي قيد يمنع التكبير.
-
نسّق حاوية واجهة رئيسية باستخدام box-sizing بقيمة border-box وعرض 100% وارتفاع أدنى قدره 80dvh.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.