Articles
Introduction au CSS
Fenêtre d’affichage et conception réactive

Fenêtre d’affichage et conception réactive

Cet article explique la fenêtre d’affichage et la conception réactive.

Vous apprendrez comment définir la fenêtre d’affichage à l’aide de la balise <meta> et pourquoi c’est important.

YouTube Video

HTML pour l'aperçu

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>

À propos de la configuration du viewport en HTML

Le paramètre viewport est utilisé pour contrôler les informations sur la zone d'affichage (viewport) du dispositif affichant la page web. Il joue un rôle important, notamment dans l'ajustement de l'affichage des pages web sur les appareils mobiles.

Qu'est-ce qu'un Viewport ?

Le Viewport fait référence à la zone d'affichage d'une fenêtre de navigateur ou d'un appareil où l'utilisateur consulte une page web. Sur un ordinateur de bureau, la taille de la fenêtre du navigateur devient le viewport, tandis que sur les appareils mobiles comme les smartphones et les tablettes, la taille de l'écran de l'appareil devient le viewport.

Spécifier le Viewport

Pour contrôler le viewport, vous configurez les paramètres du viewport en utilisant la balise <meta> en HTML. Ce paramètre vous permet de spécifier comment la page s'affichera sur différents appareils.

Syntaxe de base 

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

Ce code configure la largeur du viewport pour correspondre à la largeur de l'appareil et le niveau de zoom initial (échelle d'affichage) de la page à 1.0 (affichage à 100%).

Propriétés principales du viewport

Les propriétés qui peuvent principalement être spécifiées avec l'attribut content du viewport sont les suivantes :.

  1. width

    • Spécifier la largeur du viewport avec width. En le configurant sur device-width, le viewport est ajusté à la largeur physique de l'appareil en pixels.
    • Exemple : width=device-width

  2. height

    • Spécifier la hauteur du viewport avec height, bien que généralement seule la largeur soit configurée et que la hauteur ne soit pas souvent spécifiée. En le configurant sur device-height, le viewport correspond à la hauteur physique de l'appareil en pixels.
    • Exemple : height=device-height

  3. initial-scale

    • Spécifier le niveau de zoom initial de la page avec initial-scale. 1.0 signifie le niveau de zoom à 100% de l'appareil.
    • Exemple : initial-scale=1.0

  4. minimum-scale

    • Spécifiez l'échelle minimale pour dézoomer avec minimum-scale. En définissant 0.5, vous pouvez dézoomer jusqu'à 50%.
    • Exemple : minimum-scale=0.5

  5. maximum-scale

    • Spécifiez l'échelle maximale pour zoomer avec maximum-scale. En définissant 2.0, vous pouvez zoomer jusqu'à 200%.
    • Exemple : maximum-scale=2.0

  6. user-scalable

    • Spécifiez si l'utilisateur peut zoomer sur la page avec user-scalable. Utilisez yes ou no pour spécifier.
    • Exemple : Définir user-scalable=no désactive le zoom utilisateur.

Exemples couramment utilisés

  1. Paramètres standard pour le responsive
1<meta name="viewport" content="width=device-width, initial-scale=1.0">

Ce paramètre ajuste automatiquement la page à la largeur de l'écran des appareils mobiles et garantit que la page est affichée avec un niveau de zoom de 100%. C'est un paramètre fondamental pour le design responsive.

  1. Désactiver le zoom
1<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

Ce paramètre désactive le zoom par l'utilisateur. Il est utilisé lorsque le zoom n'est pas nécessaire pour un design spécifique ou lorsque les opérations de zoom peuvent provoquer des ruptures dans la mise en page.

  1. Niveaux de zoom fixes et largeur de la fenêtre d'affichage
1<meta name="viewport" content="width=1024, initial-scale=1.0">

Ce paramètre fixe la largeur de la fenêtre d'affichage à 1024 pixels et définit le niveau de zoom à 100% à l'affichage initial. Il est utilisé lorsque vous souhaitez maintenir la largeur de la page constante, quelle que soit la largeur de l'appareil.

Rôle du viewport

Configurer le viewport est essentiel pour optimiser l'affichage, en particulier sur les appareils mobiles. En configurant correctement le viewport, vous pouvez éviter des problèmes tels que :.

  • Empêche la page de dépasser la largeur de l'appareil, ce qui nécessiterait un défilement.
  • Empêche que le texte et les images ne deviennent trop petits pour être facilement lisibles.
  • Empêche tout zoom arrière de la page entière, rendant l'interaction difficile.

Résumé

  • Le viewport est utilisé pour contrôler la zone d'affichage de l'appareil affichant la page web.
  • Il est principalement utilisé pour s'adapter à l'affichage sur les appareils mobiles et joue un rôle important dans le design responsive.
  • Des réglages tels que width=device-width et initial-scale=1.0 sont couramment utilisés dans le design web responsive standard.

Une configuration correcte du viewport peut offrir aux utilisateurs mobiles une expérience visuelle confortable.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video

Aperçu du design réactif en CSS