Historiquement utilisé par l’industrie informatique pour désigner l’espace visible de l’écran, ce n’est pas Apple, contrairement à la croyance populaire, qui a inventé le terme « Viewport ». La balise méta « Viewport » n’a d’ailleurs rien à voir avec les plate-forme ou l’écran mais biens avec les dimensions de la fenêtre du navigateur. C’est donc carrément faux de parler de « devise ». Le terme a simplement été récupéré par Apple qui a créé la balise d’en-tête pour son Navigateur iPhone/Safari : <meta name="viewport" content="width=x[,attribut=valeur]" />.
Le « Viewport » est même une spécification du CSS2! Si des différences persistes, c’est essentiellement une histoires de virgules et de poins virgules. Safari, Firefox Mobile (Fennec), Android, les navigateurs compatibles ne manque pas aujourd’hui. Par contre, l’espace, les dimensions de l’écran visible sont légion. De là l’utilité, je dirais l’obligation d’utiliser cette balise, ne serait-ce que pour normaliser les réactions du navigateur selon l’écran.
Compatibilité
On connait tous la problématique au niveau de la compatibilité des résolutions, des dimensions d’écrans... Le navigateur sur un mobile n’a pas de fenêtre avec ces boutons, ni de barre de défilement. La navigation et les outils du navigateur sur un mobile sont accessible ou non au doigt et à l’œil de l’internaute en glissant le doigt. Zoom, tapettes et pincettes (double-tapping et pinch).
Avec un ordinateur de bureau, le « Viewport » est tout ce qui est visible. L’usager doit par exemple utiliser la barre de défilement si la page est plus longue que le « Viewport ». Mais avec un mobile, le « Viewport » est l’espace total occupé par la page incluant tout ce qui n’est pas visible à l’écran.
- Le « visible viewport » est la partie de la page visible à l’écran.
- Le « layout viewport » est plus large que la partie de la page visible à l’écran. Il contient aussi les élément qui ne sont pas visible à l’écran.
Un écran peut avoir physiquement une largeur de 480 pixels, alors que le « viewport » peut faire 800 pixels. Ceci permet à une page Web conçu à 800 pixels d’être entièrement visible à l’écran avec un « Viewport » de 1.0. Les navigateurs Android définissent par défaut un « viewport » à 980px (wide viewport mode). Et la plupart des navigateurs zoom au minimum possible par défaut. pour voir l’ensemble du « Viewport » (overview mode).
En plus, il y a l’orientation! Avec Safari et IOS l’espace visible en mode « Portrait » et « Paysage » (landscape) n’est pas la même en raison de l’interface du navigateur et la barre de bouton, du URL, plus ou moins haute (60 px). Notez que Safari force une largeur de 320px ou 768px peut importe l’orientation paysage ou portrait. Exemple Safari et IOS
- Portrait
- 320 x 356 pixels
- Paysage (landscape)
- 480 x 208 pixels
Lire « Retina et les images adaptatives » pour plus de détail.
Propriétés du « Viewport »
<meta name="viewport"
content="
height = [valeur en pixel | "device-height"] ,
width = [valeur en pixel| "device-width"] ,
initial-scale = nombre réel ,
minimum-scale = nombre réel ,
maximum-scale = nombre réel ,
user-scalable = ["yes" | "no"]
" />
- width
- Largeur du « layout viewport »
- height
Hauteur du « layout viewport »(non supporté)- initial-scale
- Spécifie le zoom initial de la page ET la largeur du « layout viewport ».
- minimum-scale
- Spécifie le zoom minimum (zoom out).
- maximum-scale
- Spécifie le zoom maximum zoom in).
- user-scalable
- Autorise ou non le zoom. Personnellement déconseillé pour plusieurs raisons.
Deux valeurs spéciales
- device-width
- La largeur en pixels de l’écran.
- device-height
La hauteur en pixels de l’écran(non supporté).
<head> <title>Example de largeur avec la valeur spéciale « device-width »</title> <meta name="viewport" content="width=device-width, user-scalable=no" /> </head>
Cibler la définition (Device Density) de l’écran en CSS
Bien qu’il existe un nombre impressionnant de résolution, on classe les classe en trois groupe. Faible, médium et haute. Le tout identifié par le ratio de pixel -webkit-device-pixel-ratio. 1, 1.5 ou 2. Équivalent en gros en point par pouce :
- 72 ppp
- Faible (en général un écran d’ordinateur de bureau, mais aussi des tablettes de lecture.
- 160 ppp
- Moyenne (par exemple les tablettes Android de première génération)
- 200 à 300 ppp
- Haute (écran Retina...)
Manipulation CSS
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="haute-definition.css" /> <link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="basse-definition.css" />
Manipulation CSS
#header { background:url(medium-definition.png); } @media screen and (-webkit-device-pixel-ratio: 1.5) { /* CSS pour écran en haute définition */ #header { background:url(haute-definition.png); } } @media screen and (-webkit-device-pixel-ratio: 0.75) { /* CSS pour écran en basse définition */ #header { background:url(basse-definition.png); } }
Manipulaton JavaScript
if (window.devicePixelRatio == 1.5) { alert("Écran en haute définition"); } else if (window.devicePixelRatio == 0.75) { alert("Écran en basse définition"); }
Ma solution idéale consiste à forcer l’affichage à 100%, c’est à dire la largeur visible de l’écran width=device-width et de limiter le « layout » minimum à 1. De cette façon la page Web s’ajuste et empêche l’internaute de zoomer en deçà de la largeur, tout en permettant le grossissement de la page. De un, la page s’affiche correctement. De deux, l’internaute peut utiliser le grossissement (merveilleuse fonctionnalité des écrans tactiles) sans un effet de glissement de droite à gauche.
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
Références
- Utiliser la balise meta viewport pour contrôler la mise en page sur les navigateurs mobiles
- Safari Developer Library Developer - Supported Meta Tags
- Safari Developer Library Developer - Configuring the Viewport
- CSS2 specification - Section 9.1.1 9.1.1 The viewport
- Meta viewport
- QuirksMode - A tale of two viewports - part one
- QuirksMode - A tale of two viewports - part two
- Android Developers - Supporting Different Screens in Web Apps
- Adrian World Design Viewport Demo
![[Photo]](https://www.trucsweb.com/documents/images/2024/js-bs-formulaire-fetch.png)
Formulaire Bootstrap 5 Ajax avec validation.![[Photo]](http://www.trucsweb.com/documents/images/2023/elephants-Salvador_Dali_1948.jpg)
Sécuriser l’accès « bureau à distance » sous IIS![[Photo]](http://www.trucsweb.com/documents/images/2023/trou_noir_galaxie_M87.jpg)
L’AI au temps du Far-Web![[Photo]](http://www.trucsweb.com/documents/images/2023/gilles-villeneuve-montreal1978.jpg)
Sélecteurs JavaScript querySelector() et querySelectorAll()![[Photo]](http://www.trucsweb.com/documents/images/2023/evolution_de_lhomme.jpg)
CSS - Animations![[Photo]](http://www.trucsweb.com/documents/images/2023/univers-copernic.jpg)
Mode de couleurs (Color modes) Bootstrap 5![[Photo]](http://www.trucsweb.com/documents/images/2023/les_burgers_de_papa.jpg)
25 ans des Trucsweb - Bouton hamburger animé Bootstrap 5![[Photo]](http://www.trucsweb.com/documents/images/logos/l_whatwg.svg)
Living Standard pour HTML de Apple, Google, Mozilla, Microsoft ...et la W3C![[Photo]](http://www.trucsweb.com/documents/images/2022/tim-berners-lee-web-b.jpg)
Le nouveau HTML « Living Standard » et le XML![[Photo]](http://www.trucsweb.com/documents/images/2022/v_jacques_dutronc-les_cactus.jpg)
Sécuriser un formulaire de contact au Far-Web!![[Photo]](http://www.trucsweb.com/documents/images/2022/Piet_Mondrian_1936-1942-Composition_no_12_avec_du_bleu.jpg)
![[Photo]](http://www.trucsweb.com/documents/images/2019/gazette_quebec_1790-2c.jpg)
![[Photo]](http://www.trucsweb.com/documents/images/2019/volcan-2.jpg)
![[Photo]](http://www.trucsweb.com/documents/images/2017/guitare-youtube.jpg)
![[Photo]](http://www.trucsweb.com/documents/images/2017/font-size2vmin.jpg)
![[Photo]](http://www.trucsweb.com/documents/images/2016/projet-amp.png)
![[Photo]](http://www.trucsweb.com/documents/images/2015/neith_generatrice.jpg)
![[Photo]](http://www.trucsweb.com/documents/images/2014/schema_saeulenordnungen_pt.jpg)
![[Photo]](http://www.trucsweb.com/documents/images/2014/alice.png)
![[Photo]](http://www.trucsweb.com/documents/images/2014/photo100.jpg)
![[Photo]](http://www.trucsweb.com/documents/images/2014/responsive-screen-mockup-pack.jpg)
AbuseIPDB
Connexion