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, מגדירים את ההגדרות שלו באמצעות תג <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. רמות זום קבועות ורוחב Viewport קבוע
1<meta name="viewport" content="width=1024, initial-scale=1.0">

הגדרה זו קובעת את רוחב ה-Viewport ל-1024 פיקסלים ומגדירה רמת זום של 100% בתצוגה הראשונית. משתמשים בהגדרה זו כאשר רוצים לשמור על רוחב עמוד קבוע ללא תלות ברוחב המכשיר.

תפקיד ה-viewport

הגדרת ה-viewport חיונית לאופטימיזציה של התצוגה, במיוחד במכשירים ניידים. באמצעות תצורה נכונה של ה-Viewport, ניתן למנוע בעיות כגון הבאות:.

  • מונעת מהעמוד לחרוג מרוחב המכשיר, מה שהיה מחייב גלילה.
  • מונע מהטקסט והתמונות להפוך לקטנים מדי כך שלא ניתן לקרוא אותם בקלות.
  • מונע מהעמוד כולו להתמזער, דבר שעשוי להקשות על האינטראקציה.

סיכום

  • viewport משמש לשלוט באזור התצוגה של המכשיר שמציג את דף האינטרנט.
  • משמש בעיקר להתאמת התצוגה במכשירים ניידים ויש לו תפקיד חשוב בעיצוב רספונסיבי.
  • הגדרות כמו width=device-width ו-initial-scale=1.0 נפוצות בעיצוב אתרים רספונסיבי סטנדרטי.

הגדרה נכונה של viewport יכולה לספק למשתמשים ניידים חוויית צפייה נוחה.

תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.

YouTube Video

סקירה כללית על עיצוב רספונסיבי ב-CSS