Frontend Academy · درس

وسم Meta لإطار العرض

أضف وسم meta لإطار العرض، وافهم سبب ضرورته لعمل التخطيطات المتجاوبة بشكل صحيح على الأجهزة المحمولة.

الدرس 1 من 413 خطوة

وسم Meta لإطار العرض درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.

لماذا نستخدم وسم meta الخاص بـ viewport؟

من دون وسم meta الخاص بـ viewport، تعرض متصفحات الأجهزة المحمولة الصفحة بعرض سطح مكتب (غالبًا 980px) ثم تصغّرها لتلائم الشاشة. يجعل ذلك النص صغيرًا جدًا والتخطيطات غير سليمة. ويخبر وسم meta المتصفح باستخدام العرض الفعلي للجهاز.

الوسم

أضف هذا داخل <head> في كل صفحة. وهو مطلوب حتى يعمل أي تصميم متجاوب بصورة صحيحة.

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

width=device-width

تضبط width=device-width عرض viewport على عرض شاشة الجهاز بوحدات بكسل CSS. ففي iPhone 14 (بعرض 390px)، يجعل ذلك viewport بعرض 390px، لا 980px.

initial-scale=1.0

تضبط initial-scale=1.0 مستوى التكبير على 1 عند تحميل الصفحة أول مرة. من دونها، قد تطبّق بعض المتصفحات عامل تكبير رغم ذلك. وبالاقتران مع device-width، تمنحك نسبة 1:1 حقيقية بين بكسل CSS وبكسل الجهاز.

بكسلات CSS مقابل البكسلات الفعلية

تملك الشاشات عالية الكثافة (Retina) نسبة بكسلات الجهاز (DPR) أكبر من 1. ويحتوي iPhone 14 بعرض 390px على 1170 بكسل فعلي (DPR = 3). تعمل بكسلات CSS كطبقة تجريد فوق البكسلات الفعلية، لذلك يظل CSS يعمل بوحدات بكسل CSS بغض النظر عن DPR.

لا تستخدم user-scalable=no

يضيف بعض المطورين user-scalable=no لتعطيل التكبير بإيماءة القرص. لا تفعلوا ذلك، لأنه يمنع المستخدمين ذوي الإعاقات البصرية من التكبير لقراءة المحتوى، كما يخالف معيار النجاح 1.4.4 من WCAG.

وحدات viewport: ‏vw وvh

تساوي 1vw نسبة 1% من عرض viewport. وتساوي 1vh نسبة 1% من ارتفاع viewport. يملأ 100vw و100vh كامل viewport. استخدمها لأقسام الواجهة الرئيسية والتخطيطات التي تملأ الشاشة.

.hero {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

dvh — ارتفاع viewport الديناميكي

على الأجهزة المحمولة، يتضمن 100vh واجهة المتصفح (شريط العنوان)، ما قد يؤدي إلى اقتطاع المحتوى. أما 100dvh الأحدث (ارتفاع viewport الديناميكي) فيتكيف مع واجهة المتصفح الظاهرة. استخدمه مع قيمة احتياطية.

.full-screen {
  min-height: 100vh;    /* fallback */
  min-height: 100dvh;   /* modern browsers */
}

viewport في DevTools

في Chrome DevTools، انقر على رمز الجهاز للدخول إلى وضع الجهاز ومعاينة شكل صفحتك بدقة عند أحجام viewport مختلفة. وتعرض المسطرة وحدات بكسل CSS.

تنويعات سمة content

يمكنك أيضًا ضبط initial-scale وminimum-scale وmaximum-scale. أبقِها عند قيم منطقية. يظل ضبط minimum-scale=1 من دون user-scalable=no يسمح بالتكبير، وهو الأسلوب الذي يراعي إمكانية الوصول.

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

viewport واستعلامات الوسائط

تستخدم استعلامات الوسائط عرض viewport (قيمة بكسل CSS، لا البكسلات الفعلية). فإذا كان viewport بعرض 390px، فسيطابق @media (max-width: 768px). ويجعل وسم meta الخاص بـ viewport نقاط التوقف هذه تعمل بصورة صحيحة على الأجهزة المحمولة.

تحقّق سريعًا

ما الغرض من width=device-width في وسم meta الخاص بـ viewport؟

أجب عليها في الدرس التفاعلي

مراجعة: وسم meta الخاص بـ viewport

أدرج دائمًا داخل . لا تعطّل تحجيم المستخدم أبدًا. استخدم vw/vh لتحديد الأحجام نسبةً إلى viewport. ويعالج dvh مشكلات واجهة المتصفح على الأجهزة المحمولة. يتيح هذا الوسم الواحد عمل CSS المتجاوب بالكامل على الأجهزة المحمولة.

البدء مجانًا

تعلم HTML مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 41
الدروس: 163

ابدأ التعلم مجانًا عرض الدورة الكاملة

الأسئلة الشائعة

هل درس «وسم Meta لإطار العرض» مجاني؟

نعم — نص درس «وسم Meta لإطار العرض» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.

ماذا ستتعلم في «وسم Meta لإطار العرض»؟

أضف وسم meta لإطار العرض، وافهم سبب ضرورته لعمل التخطيطات المتجاوبة بشكل صحيح على الأجهزة المحمولة. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟

لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «وسم Meta لإطار العرض»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟

نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

وسم Meta لإطار العرض
Flexbox للتخطيط
CSS Grid للتخطيط
استعلامات الوسائط والتطوير الموجّه للهواتف أولًا

← العودة إلى Frontend Academy