בלוג זה יסביר כיצד להשתמש במטא תג viewport לעיצוב אתרים רספונסיבי ב-HTML:
מהו המטא תג של Viewport?
ה ' נקודת מבט ' הוא התג החשוב ביותר ליצירת עיצוב רספונסיבי על ידי שליטה כיצד התוכן יופיע בגדלי מסך שונים. תג זה ממוקם בתוך ' ' סעיף והוא מכיל בתוכו שתי תכונות. הראשון הוא ' שֵׁם ' תכונה שאומרת את מטרת התג הזה והשנייה היא ' תוֹכֶן ' שמחזיק את הנתונים הקשורים לערך המסופק ב' שֵׁם ' תכונה.
תכונות שונות של מטא תג Viewport
למטא תג viewport יש את התכונות הבאות שניתן להציב כערך עבור ' תוֹכֶן ' תכונה:
תכונת 'רוחב'.
ה ' רוֹחַב ' תכונה מציינת את האזור הגלוי של דף אינטרנט עבור התוכן בצורה אנכית. המטא תג שלו נראה כך:
< מטא שֵׁם = 'נקודת מבט' תוֹכֶן = 'width=device-width' >
תכונת 'גובה'.
ה ' גוֹבַה ' תכונה מגדירה את האורך האנכי של דף האינטרנט כדי להבטיח שגובה יציאת התצוגה תואם לגובה המסך. המטא תג שלו נראה כך:
< מטא שֵׁם = 'נקודת מבט' תוֹכֶן = 'גובה=400' >
מאפיין 'קנה מידה ראשוני'.
ה ' קנה מידה ראשוני תכונה ' מבטיחה שדף האינטרנט יוצג ברמת זום מתאימה בעת הטעינה הראשונה. לדוגמה, בקר בקוד הבא:
< מטא שֵׁם = 'נקודת מבט' תוֹכֶן = 'width=device-width, initial-scale=1.0' >תכונת 'קנה מידה מקסימלי'.
ה ' קנה מידה מקסימלי ' תכונה מציינת את רמת הזום המקסימלית עבור דף האינטרנט כדי למנוע בעיות פריסה:
< מטא שֵׁם = 'נקודת מבט' תוֹכֶן = 'width=device-width, maximum-scale=1.0' >
תכונת 'קנה מידה מינימלי'.
ה ' קנה מידה מינימלי 'מנוצל כדי להגביל את המשתמש מלהתרחק יותר מדי על ידי ציון רמת קנה המידה המינימלית של התרחקות:
< מטא שֵׁם = 'נקודת מבט' תוֹכֶן = 'width=device-width, minimum-scale=0.5' >מאפיין 'ניתן להרחבה למשתמש'.
ה ' ניתן להרחבה למשתמש התכונה ' מאפשרת או לא מאפשרת למשתמש לבצע הגדלה או הגדלה של מסך דף האינטרנט על ידי הגדרת הערך ל' לא ' או ' כן '. המטא תג המאפשר למשתמש להתקרב או להתרחק הוא:
< מטא שֵׁם = 'נקודת מבט' תוֹכֶן = 'width=device-width, user-scalable=yes' >כיצד להשתמש במטא תג Viewport לעיצוב אתרים רספונסיבי ב-HTML?
כדי להבין טוב יותר את השימוש במטא תג viewport לעיצוב אתרים רספונסיבי. הבה נעבור על דוגמה:
נניח שבתוך ' לאחר הידור של קטע הקוד לעיל, דף האינטרנט נראה כך: הפלט מראה שהתוכן אינו מגיב מכיוון שהוא אינו מוצג בצורה מושלמת במכשירים קטנים. עכשיו כדי להפוך אותו למגיב הוסף את ' נקודת מבט ' מטא תג: לאחר עדכון הקוד, דף האינטרנט נראה כך בגדלי מסך שונים: הפלט הסופי ממחיש שדף האינטרנט מגיב כעת לאחר הוספת מטא תג בתוך ' 'תג. תג המטא של viewport מאפשר למפתח לספק סט הוראות לדפדפן שקובע כיצד דף האינטרנט יוצג במכשירים שונים בגודל מסך. המטא תג ממוקם בתוך ' ” תג ומכיל תכונות המסייעות בבניית עיצובים רספונסיביים של אתרים. בלוג זה הדגים כיצד להשתמש במטא תג viewport לעיצוב אתרים רספונסיבי ב-HTML. 'תג: < div >
< ע >
< ב > מופעל על ידי Linuxhint, כדי להבין טוב יותר את המטא תג של viewport פתח את דף האינטרנט במסך אחר גודל מכשירים.< / ב >
< / ע >
< img src = '../bg.jpg' הכל = 'האקר' רוֹחַב = '460' גוֹבַה = '3. 4. 5' >
< ע סִגְנוֹן = 'padding:5px' >
< אני >הצטרף לצוות Linuxhint < / אני >
מופעל על ידי Linuxhint, כדי להבין טוב יותר את המטא תג של viewport פתח את דף האינטרנט במסך אחר גודל מכשירים. מופעל על ידי Linuxhint, כדי להבין טוב יותר את המטא תג של viewport פתח את דף האינטרנט במסך אחר גודל מכשירים. מופעל על ידי Linuxhint, כדי להבין טוב יותר את המטא תג של viewport פתח את דף האינטרנט במסך אחר גודל מכשירים. מופעל על ידי Linuxhint, כדי להבין טוב יותר את המטא תג של viewport פתח את דף האינטרנט במסך אחר גודל מכשירים.
< / ע >
< / div >
< מטא שֵׁם = 'נקודת מבט' תוֹכֶן = 'width=device-width, initial-scale=1.0' / >
< / רֹאשׁ >
סיכום