Articles
مقدمة إلى CSS
نافذة العرض والتصميم المتجاوب

نافذة العرض والتصميم المتجاوب

تشرح هذه المقالة نافذة العرض والتصميم المتجاوب۔

سوف تتعلم كيفية تعيين نافذة العرض باستخدام وسم <meta> ولماذا هو أمر مهم۔

YouTube Video

HTML للمعاينة

css-responsive-viewport.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-responsive-viewport.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties For Responsive Design</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Viewport Properties</h2>
20        </header>
21        <article>
22            <h3>Viewport Example</h3>
23            <section>
24                <header><h4>HTML</h4></header>
25                <pre>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</pre>
26            </section>
27        </article>
28        <article>
29            <h3>width</h3>
30            <section>
31                <header><h4>HTML</h4></header>
32                <pre>&lt;meta name="viewport" content="width=device-width"&gt;</pre>
33            </section>
34        </article>
35        <article>
36            <h3>height</h3>
37            <section>
38                <header><h4>HTML</h4></header>
39                <pre>&lt;meta name="viewport" content="height=device-height"&gt;</pre>
40            </section>
41        </article>
42        <article>
43            <h3>initial-scale</h3>
44            <section>
45                <header><h4>HTML</h4></header>
46                <pre>&lt;meta name="viewport" content="initial-scale=1.0"&gt;</pre>
47            </section>
48        </article>
49        <article>
50            <h3>minimum-scale</h3>
51            <section>
52                <header><h4>HTML</h4></header>
53                <pre>&lt;meta name="viewport" content="minimum-scale=0.5"&gt;</pre>
54            </section>
55        </article>
56        <article>
57            <h3>maximum-scale</h3>
58            <section>
59                <header><h4>HTML</h4></header>
60                <pre>&lt;meta name="viewport" content="maximum-scale=2.0"&gt;</pre>
61            </section>
62        </article>
63        <article>
64            <h3>user-scalable</h3>
65            <section>
66                <header><h4>HTML</h4></header>
67                <pre>&lt;meta name="viewport" content="user-scalable=no"&gt;</pre>
68            </section>
69        </article>
70        <article>
71            <h3>Viewport Common Examples 1</h3>
72            <section>
73                <header><h4>HTML</h4></header>
74                <pre>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</pre>
75            </section>
76        </article>
77        <article>
78            <h3>Viewport Common Examples 2</h3>
79            <section>
80                <header><h4>HTML</h4></header>
81<pre>
82&lt;meta name="viewport"
83      content="width=device-width, initial-scale=1.0, user-scalable=no"&gt;
84</pre>
85            </section>
86        </article>
87        <article>
88            <h3>Viewport Common Examples 3</h3>
89            <section>
90                <header><h4>HTML</h4></header>
91                <pre>&lt;meta name="viewport" content="width=1024, initial-scale=1.0"&gt;</pre>
92            </section>
93        </article>
94    </main>
95</body>
96</html>

حول إعداد viewport في HTML

يُستخدم إعداد viewport للتحكم في معلومات حول منطقة العرض (viewport) للجهاز الذي يعرض صفحة الويب.۔ يلعب دورًا هامًا خصوصًا في ضبط عرض صفحات الويب على الأجهزة المحمولة.۔

ما هو الـ Viewport؟

يشير الـ Viewport إلى منطقة العرض في نافذة المتصفح أو الجهاز حيث يقوم المستخدم بعرض صفحة الويب.۔ على أجهزة سطح المكتب، يصبح حجم نافذة المتصفح هو الـ Viewport، بينما على الأجهزة المحمولة مثل الهواتف الذكية والأجهزة اللوحية، يكون حجم شاشة الجهاز هو الـ Viewport.۔

تحديد الـ Viewport

للتحكم في الـ Viewport، تحتاج إلى إعداد إعدادات الـ Viewport باستخدام وسم <meta> في HTML.۔ هذا الإعداد يتيح لك تحديد كيفية عرض الصفحة على الأجهزة المختلفة.۔

الصياغة الأساسية 

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

يضبط هذا الكود عرض الـ Viewport ليتطابق مع عرض الجهاز ومستوى التكبير الابتدائي لعرض الصفحة إلى 1.0 (عرض 100%).۔

الخصائص الرئيسية لـ viewport

الخصائص التي يمكن تحديدها بشكل أساسي باستخدام سمة content الخاصة بـ viewport هي كما يلي:۔

  1. width

    • تحديد عرض الـ Viewport باستخدام width.۔ عند ضبطه على device-width، يتم تعديل الـ Viewport ليطابق العرض الفعلي للجهاز بالبكسل.۔
    • مثال: width=device-width

  2. height

    • تحديد ارتفاع الـ Viewport باستخدام height، على الرغم من أنه غالبًا ما يتم فقط تحديد العرض ونادرًا ما يُحدد الارتفاع.۔ عند ضبطه على device-height، يتطابق الـ Viewport مع الارتفاع الفعلي للجهاز بالبكسل.۔
    • مثال: height=device-height

  3. initial-scale

    • تحديد مستوى التكبير الابتدائي للصفحة باستخدام initial-scale.۔ 1.0 يعني مستوى التكبير 100% للجهاز۔
    • مثال: initial-scale=1.0

  4. minimum-scale

    • حدد النسبة الأدنى للتصغير باستخدام minimum-scale۔ عند تحديده إلى 0.5، يمكنك تصغير العرض إلى 50%۔
    • مثال: minimum-scale=0.5

  5. maximum-scale

    • حدد النسبة القصوى للتكبير باستخدام maximum-scale۔ عند تحديده إلى 2.0، يمكنك تكبير العرض إلى 200%۔
    • مثال: maximum-scale=2.0

  6. user-scalable

    • حدد ما إذا كان بإمكان المستخدم تكبير الصفحة باستخدام user-scalable۔ حدد باستخدام yes أو no۔
    • مثال: تحديد user-scalable=no يعطل تكبير المستخدم۔

أمثلة شائعة الاستخدام

  1. الإعدادات القياسية للاستجابة
1<meta name="viewport" content="width=device-width, initial-scale=1.0">

يقوم هذا الإعداد بضبط الصفحة تلقائيًا لتتناسب مع عرض شاشة الأجهزة المحمولة ويضمن عرض الصفحة بمستوى تكبير 100%۔ إنه إعداد أساسي لتصميم المواقع المتجاوبة۔

  1. تعطيل التكبير
1<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

يقوم هذا الإعداد بتعطيل إمكانية التكبير من قبل المستخدم۔ يُستخدم هذا الإعداد عندما لا يكون التكبير ضروريًا لتصميم معين أو عندما قد يؤدي التكبير إلى كسر التصميم۔

  1. مستويات تكبير ثابتة وعرض منفذ المشاهدة
1<meta name="viewport" content="width=1024, initial-scale=1.0">

يقوم هذا الإعداد بتثبيت عرض منفذ المشاهدة عند 1024 بيكسل ويضبط مستوى التكبير إلى 100% عند العرض الأولي۔ يُستخدم هذا الإعداد عندما ترغب في الحفاظ على عرض الصفحة ثابتًا بغض النظر عن عرض الجهاز۔

دور viewport

إعداد viewport أمر ضروري لتحسين العرض، خاصة على الأجهزة المحمولة۔ من خلال إعداد منفذ المشاهدة بشكل صحيح، يمكنك منع المشكلات التالية:۔

  • يمنع تجاوز الصفحة لعرض الجهاز، مما يتطلب التمرير۔
  • يمنع النصوص والصور من أن تصبح صغيرة جدًا بحيث لا يمكن قراءتها بسهولة۔
  • يمنع تكبير الصفحة بالكامل، مما يجعل من الصعب التفاعل معها۔

الملخص

  • يُستخدم عنصر viewport للتحكم في منطقة العرض على الجهاز الذي يعرض صفحة الويب۔
  • يُستخدم بشكل أساسي لتكييف العرض على الأجهزة المحمولة ويلعب دورًا مهمًا في التصميم الاستجابي۔
  • الإعدادات مثل width=device-width وinitial-scale=1.0 تُستخدم بشكل شائع في تصميم الويب الاستجابي القياسي۔

يمكن أن يوفر إعداد عنصر viewport بشكل صحيح تجربة عرض مريحة لمستخدمي الهواتف المحمولة۔

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video

نظرة عامة عن التصميم المتجاوب في CSS