תיעוד HTML עם דוגמאות להרצה: Meta Viewport

Q: מהי תגית ה-meta viewport הסטנדרטית?

, בתוך . זו הבחירה הנכונה כמעט לכל עמוד רספונסיבי.

Q: למה ה-meta viewport שלי לא עובד?

בדקו שהתגית נמצאת ב- , שה-name הוא viewport ושהערכים מופרדים בפסיקים. אם העמוד עדיין נגלל הצידה, יש אלמנט רחב מהמסך, כמו רוחב קבוע, תמונה גדולה או מילה ארוכה; התגית לא יכולה לתקן CSS שרחב יותר מהמכשיר.

התגית שצריך

שימו את השורה הזו ב-<head> של כל עמוד:

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

width=device-width הופך את הפריסה לרחבה כמו המסך, ו-initial-scale=1 פותח את העמוד בזום של 100%. זה כל מה שרוב האתרים צריכים. עמוד מלא עם התגית במקומה:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Viewport</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <h1>Hello, phone</h1>
  <p id="out"></p>
  <script>
    const meta = document.querySelector('meta[name="viewport"]');
    document.getElementById('out').textContent =
      'Viewport tag: "' + meta.content + '". Layout width here: ' + innerWidth + 'px.';
  </script>
</body>
</html>

הסקריפט קורא את התגית ואת רוחב הפריסה. דפדפנים במחשב מתעלמים מתגית ה-viewport, ולכן בתצוגה המקדימה הזו הרוחב הוא פשוט הרוחב של תיבת התצוגה. בטלפון, אותו קובץ מדווח את רוחב הטלפון (בדרך כלל 360 עד 430 פיקסלי CSS) בזכות התגית.

מה טלפונים עושים בלעדיה

דפדפן נייד שלא מוצא תגית viewport מניח שהעמוד נבנה למחשב. הוא פורס את העמוד ברוחב של כ-980 פיקסלים, ואז מכווץ את כולו כדי שייכנס למסך. שני הטלפונים המדומים שלמטה טוענים את אותו עמוד, אחד בפריסה של 980px ואחד ברוחב של טלפון, ושניהם מוקטנים לאותו גודל:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>With and without</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .phones { display: flex; gap: 24px; flex-wrap: wrap; }
    figure { margin: 0; width: 180px; }
    .phone { width: 180px; height: 320px; overflow: hidden; border: 6px solid #111827; border-radius: 16px; }
    iframe { border: 0; transform-origin: 0 0; background: #fff; }
    figcaption { font-size: 13px; margin-top: 6px; }
  </style>
</head>
<body>
  <div class="phones">
    <figure>
      <div class="phone"><iframe id="without" title="Page at 980px"></iframe></div>
      <figcaption>No viewport tag: laid out at 980px, shrunk</figcaption>
    </figure>
    <figure>
      <div class="phone"><iframe id="with" title="Page at 375px"></iframe></div>
      <figcaption>With the tag: laid out at 375px</figcaption>
    </figure>
  </div>
  <script>
    const page = `<style>
      body { font: 16px system-ui, sans-serif; margin: 12px; }
      .cols { display: flex; gap: 12px; }
      .cols div { flex: 1; background: #dbeafe; padding: 12px; }
      @media (max-width: 600px) { .cols { flex-direction: column; } }
    </style>
    <h1>My site</h1>
    <p>This paragraph is set at 16px, a comfortable size to read.</p>
    <div class="cols"><div>Column one</div><div>Column two</div></div>`;
    function show(id, layoutWidth) {
      const frame = document.getElementById(id);
      const scale = 180 / layoutWidth;
      frame.width = layoutWidth;
      frame.height = Math.round(320 / scale);
      frame.style.transform = 'scale(' + scale + ')';
      frame.srcdoc = page;
    }
    show('without', 980);
    show('with', 375);
  </script>
</body>
</html>

בטלפון הראשון הטקסט בגודל 16px יוצא זעיר והקורא צריך לצבוט ולהגדיל. בשני הוא נשאר קריא, והעמודות נערמות זו מעל זו כי הכלל @media (max-width: 600px) מתקיים. זה התפקיד השני של התגית: שאילתות מדיה רואות את רוחב הפריסה, כך שבלי התגית טלפון מדווח 980px וסגנונות המובייל שלכם אף פעם לא מופעלים. שנו את 375 ל-980 ב-show('with', 375) ושני הטלפונים נראים אותו דבר.

התגית היא רק חצי מהעבודה

תגית ה-viewport נותנת לכם פריסה צרה; ה-CSS שלכם צריך להיכנס בה. אלמנט אחד עם רוחב קבוע שרחב מהמסך גורם לכל העמוד להיגלל הצידה:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Fitting the width</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .screen { width: 300px; border: 2px solid #111827; padding: 8px; margin-bottom: 12px; overflow-x: auto; }
    .banner { background: #f59e0b; height: 60px; }
    .fixed { width: 480px; }
    .fluid { max-width: 100%; width: 480px; }
  </style>
</head>
<body>
  <p>A 300px wide screen:</p>
  <div class="screen"><div class="banner fixed">width: 480px</div></div>
  <div class="screen"><div class="banner fluid">max-width: 100%</div></div>
</body>
</html>

התיבה הראשונה נגללת הצידה; השנייה מתכווצת כדי להיכנס. תנו לתמונות ולאלמנטים רחבים אחרים max-width: 100%, והעדיפו רוחבים גמישים (אחוזים, fr, flexbox) על פני רוחבים קבועים בפיקסלים.

ערכי ה-viewport

ערך	דוגמה	מה הוא עושה
`width`	`width=device-width`	רוחב הפריסה. `device-width` הוא רוחב המסך בפיקסלי CSS; מותר גם מספר, אבל זה רק לעיתים רחוקות רעיון טוב.
`initial-scale`	`initial-scale=1`	רמת הזום כשהעמוד נפתח.
`minimum-scale` / `maximum-scale`	`maximum-scale=5`	מגבלות על זום. מקסימום נמוך חוסם זום, אז השמיטו את `maximum-scale`.
`user-scalable`	`user-scalable=yes`	האם מותר זום בצביטה. השמיטו אותו.
`viewport-fit`	`viewport-fit=cover`	מאפשר לעמוד להתפרש מתחת לנוטץ' או לפינות מעוגלות, יחד עם padding של `env(safe-area-inset-*)`.
`interactive-widget`	`interactive-widget=resizes-content`	איך המקלדת שעל המסך משפיעה על הפריסה. נתמך ב-Chrome ב-Android.

הערכים מופרדים בפסיקים. עמוד שממלא את כל המסך בטלפונים עם נוטץ' נראה כך:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<style>
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
</style>

אל תחסמו זום

את התגית הזו תמצאו בתבניות ישנות:

<!-- Avoid: stops people from zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

היא מונעת זום בצביטה, שאנשים עם ראייה ירודה תלויים בו, וכלי בדיקת נגישות כמו Lighthouse מסמנים אותה. Safari ב-iOS מתעלם מ-user-scalable=no, כך שהתגית אפילו לא עובדת באופן עקבי. אם שדה בטופס מתקרב כשמקישים עליו באייפון, הסיבה היא גודל גופן קטן מ-16px ב-input; הגדירו את ה-font-size של ה-input ל-16px לפחות במקום לבטל זום.

טעויות נפוצות

לשכוח את התגית. גיליון סגנונות רספונסיבי לא עושה כלום בטלפונים בלעדיה, כי שאילתות המדיה רואות פריסה של 980px. שימו אותה ליד תגית ה-title בתבנית העמוד שלכם.
נקודה-פסיק בין הערכים. השתמשו בפסיקים: width=device-width, initial-scale=1.
רוחב קבוע בקוד כמו width=375. מסכים שונים זה מזה; השתמשו ב-device-width.
ביטול זום עם user-scalable=no או maximum-scale=1.
להאשים את התגית בגלילה הצידה. מצאו את האלמנט שרחב מהמסך ותנו לו רוחב גמיש.

שאלות נפוצות

מה עושה תגית ה-meta viewport?

היא אומרת לדפדפנים בנייד כמה רחבה צריכה להיות הפריסה. בלעדיה, רוב הטלפונים פורסים את העמוד ברוחב של כ-980 פיקסלי CSS ומכווצים אותו כדי שייכנס למסך. עם width=device-width הפריסה תואמת את רוחב המסך, כך שהטקסט קריא ושאילתות מדיה עובדות.

מהי תגית ה-meta viewport הסטנדרטית?

<meta name="viewport" content="width=device-width, initial-scale=1">, בתוך <head>. זו הבחירה הנכונה כמעט לכל עמוד רספונסיבי.

למה ה-meta viewport שלי לא עובד?

בדקו שהתגית נמצאת ב-<head>, שה-name הוא viewport ושהערכים מופרדים בפסיקים. אם העמוד עדיין נגלל הצידה, יש אלמנט רחב מהמסך, כמו רוחב קבוע, תמונה גדולה או מילה ארוכה; התגית לא יכולה לתקן CSS שרחב יותר מהמכשיר.

להשתמש ב-user-scalable=no או ב-maximum-scale=1?

לא. שניהם מונעים מאנשים לעשות זום, שמשתמשים רבים עם ראייה ירודה נשענים עליו, והם נכשלים בבדיקות נגישות. Safari ב-iOS מתעלם מ-user-scalable=no בכל מקרה.

האם תגית ה-meta viewport משפיעה על דפדפנים במחשב?

לא. דפדפנים במחשב מתעלמים ממנה; רוחב הפריסה שם הוא פשוט רוחב החלון. התגית חשובה בטלפונים ובטאבלטים.

מושגים קשורים