وسم Viewport Meta

جزء من قسم التنسيق باستخدام CSS في رحلة HTML على Coddy. الدرس 62 من 76.

في HTML، تُعد علامة الميتا viewport علامة خاصة تُستخدم للتحكم في تخطيط وتوسيع صفحة الويب على أجهزة مختلفة، لا سيما الأجهزة المحمولة. يتم وضعها داخل قسم <head> في مستند HTML وتوفر تعليمات للمتصفح حول كيفية عرض الصفحة. تُعد علامة الميتا viewport ضرورية لإنشاء تصميمات ويب متجاوبة تتكيف مع مختلف أحجام الشاشات ودقتها.

إليك الصيغة الأساسية لاستخدام وسم viewport meta:

<meta name="viewport" content="name=value, name=value">

<meta>: وسم HTML المستخدم لتعريف البيانات الوصفية (metadata) حول مستند HTML.
name="viewport": يحدد أن وسم meta هذا يُستخدم للتحكم في إعدادات منطقة العرض (viewport).
content: سمة توفر إعدادات منطقة العرض كقائمة مفصولة بفاصلة من أزواج name=value.

تتضمن أزواج name=value الشائعة المستخدمة في سمة content ما يلي:

width=device-width: تضبط عرض منفذ العرض (viewport) ليكون مساوياً لعرض شاشة الجهاز.

initial-scale=1.0: يحدد مستوى التكبير الأولي عند تحميل الصفحة لأول مرة. القيمة 1.0 تعني عدم وجود تكبير.

maximum-scale=1.0: يحدد أقصى مستوى تكبير مسموح به.
minimum-scale=1.0: يحدد أدنى مستوى تكبير مسموح به.

إليك مثال على كيفية استخدام علامة viewport meta في مستند HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Viewport Meta Tag</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <h1>Responsive Web Page</h1>
    <p>This page uses the viewport meta tag to adapt to different screen sizes.</p>
</body>
</html>

في هذا المثال، تم تعيين علامة ميتا لمنفذ العرض (viewport meta tag) على width=device-width, initial-scale=1.0. يخبر هذا المتصفح بضبط عرض منفذ العرض على عرض الجهاز واستخدام مستوى تكبير أولي قدره 1.0 (بدون تكبير).

التحدي

سهل

لقد تم تزويدك بمستند HTML يحتوي على عنوان (<h1>) وفقرة (<p>). مهمتك هي إضافة علامة meta الخاصة بـ viewport إلى المستند لجعله متجاوباً. اتبع الخطوات أدناه:

أضف علامة <meta> إلى قسم <head> في مستند HTML.
قم بتعيين سمة name لعلامة <meta> إلى viewport.
قم بتعيين سمة content لعلامة <meta> إلى width=device-width, initial-scale=1.0.

جرّب بنفسك

<html>
<head>
    <title>Viewport Meta Tag</title>
    <!--اكتب الكود الخاص بك هنا-->
</head>
<body>
    <h1>Responsive Web Page</h1>
    <p>This page uses the viewport meta tag to adapt to different screen sizes.</p>
</body>
</html>