Docs HTML exécutables : Meta viewport

Q: Quelle est la balise meta viewport standard ?

, placée dans . C'est le bon choix pour presque toutes les pages responsives.

Q: Pourquoi ma meta viewport ne fonctionne pas ?

Vérifiez que la balise est dans , que name vaut viewport et que les valeurs sont séparées par des virgules. Si la page défile toujours horizontalement, un élément est plus large que l'écran, comme une largeur fixe, une grande image ou un mot long ; la balise ne peut pas corriger un CSS plus large que l'appareil.

La balise à utiliser

Placez cette ligne dans le <head> de chaque page :

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

width=device-width rend la mise en page aussi large que l'écran, et initial-scale=1 ouvre la page à un zoom de 100 %. C'est tout ce dont la plupart des sites ont besoin. Une page complète avec la balise en place :

<!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>

Le script lit la balise et la largeur de la mise en page. Les navigateurs de bureau ignorent la balise viewport, donc dans cet aperçu la largeur est simplement celle de la boîte d'aperçu. Sur un téléphone, le même fichier indique la largeur du téléphone (typiquement 360 à 430 pixels CSS) grâce à la balise.

Ce que font les téléphones sans elle

Un navigateur mobile qui ne trouve pas de balise viewport suppose que la page a été faite pour un ordinateur. Il met la page en page sur environ 980 pixels de large, puis réduit l'ensemble pour tenir à l'écran. Les deux téléphones factices ci-dessous chargent la même page, l'une mise en page à 980px et l'autre à une largeur de téléphone, toutes deux ramenées à la même taille :

<!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>

Sur le premier téléphone, le texte de 16px devient minuscule et le lecteur doit pincer pour zoomer. Sur le second, il reste lisible, et les colonnes s'empilent car la règle @media (max-width: 600px) s'applique. C'est le second rôle de la balise : les media queries voient la largeur de la mise en page, donc sans la balise un téléphone annonce 980px et vos styles mobiles ne s'appliquent jamais. Remplacez 375 par 980 dans show('with', 375) et les deux téléphones se ressemblent.

La balise ne fait que la moitié du travail

La balise viewport vous donne une mise en page étroite ; votre CSS doit y tenir. Un seul élément de largeur fixe plus large que l'écran fait défiler toute la page horizontalement :

<!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>

La première boîte défile horizontalement ; la seconde se réduit pour tenir. Donnez aux images et aux autres éléments larges max-width: 100%, et préférez des largeurs flexibles (pourcentages, fr, flexbox) aux largeurs fixes en pixels.

Les valeurs de viewport

Valeur	Exemple	Rôle
`width`	`width=device-width`	Largeur de la mise en page. `device-width` est la largeur de l'écran en pixels CSS ; un nombre est aussi autorisé mais c'est rarement une bonne idée.
`initial-scale`	`initial-scale=1`	Niveau de zoom à l'ouverture de la page.
`minimum-scale` / `maximum-scale`	`maximum-scale=5`	Limites de zoom. Un maximum bas bloque le zoom, alors omettez `maximum-scale`.
`user-scalable`	`user-scalable=yes`	Autorise ou non le zoom par pincement. Omettez-le.
`viewport-fit`	`viewport-fit=cover`	Permet à la page de s'étendre sous une encoche ou des coins arrondis, avec un padding `env(safe-area-inset-*)`.
`interactive-widget`	`interactive-widget=resizes-content`	Comment le clavier à l'écran influence la mise en page. Pris en charge par Chrome sur Android.

Les valeurs sont séparées par des virgules. Une page qui remplit tout l'écran sur les téléphones à encoche ressemble à ceci :

<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>

Ne bloquez pas le zoom

Vous trouverez cette balise dans d'anciens templates :

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

Elle empêche le zoom par pincement, dont dépendent les personnes malvoyantes, et les outils de vérification d'accessibilité comme Lighthouse la signalent. Safari sur iOS ignore user-scalable=no, donc la balise ne fonctionne même pas de façon cohérente. Si un champ de formulaire zoome quand on le touche sur iPhone, la cause est une taille de police inférieure à 16px sur le champ ; donnez au champ une font-size d'au moins 16px au lieu de désactiver le zoom.

Erreurs fréquentes

Oublier la balise. Une feuille de style responsive ne fait rien sur les téléphones sans elle, car les media queries voient une mise en page de 980px. Placez-la à côté de la balise title dans votre template de page.
Des points-virgules entre les valeurs. Utilisez des virgules : width=device-width, initial-scale=1.
Coder une largeur en dur comme width=375. Les écrans varient ; utilisez device-width.
Désactiver le zoom avec user-scalable=no ou maximum-scale=1.
Accuser la balise du défilement horizontal. Trouvez l'élément plus large que l'écran et donnez-lui une largeur flexible.

Questions fréquentes

À quoi sert la balise meta viewport ?

Elle indique aux navigateurs mobiles quelle largeur donner à la mise en page. Sans elle, la plupart des téléphones mettent la page en page sur environ 980 pixels CSS puis la réduisent pour tenir à l'écran. Avec width=device-width, la mise en page correspond à la largeur de l'écran, donc le texte est lisible et les media queries fonctionnent.

Quelle est la balise meta viewport standard ?

<meta name="viewport" content="width=device-width, initial-scale=1">, placée dans <head>. C'est le bon choix pour presque toutes les pages responsives.

Pourquoi ma meta viewport ne fonctionne pas ?

Vérifiez que la balise est dans <head>, que name vaut viewport et que les valeurs sont séparées par des virgules. Si la page défile toujours horizontalement, un élément est plus large que l'écran, comme une largeur fixe, une grande image ou un mot long ; la balise ne peut pas corriger un CSS plus large que l'appareil.

Faut-il utiliser user-scalable=no ou maximum-scale=1 ?

Non. Les deux empêchent les gens de zoomer, ce dont dépendent beaucoup d'utilisateurs malvoyants, et ils échouent aux audits d'accessibilité. Safari sur iOS ignore de toute façon user-scalable=no.

La balise meta viewport a-t-elle un effet sur les navigateurs de bureau ?

Non. Les navigateurs de bureau l'ignorent ; la largeur de mise en page y est simplement celle de la fenêtre. La balise compte sur les téléphones et les tablettes.

Concepts liés