Trucsweb.com

Trucsweb.com

CSS

Structure CSS adaptative

RDFFav

La balise d’en-tête Viewport pour mobile

Contrôler la mise en page et le zoom sur les navigateurs mobiles.responsive, mobile, tabletteLa balise d’en-tête Viewport pour mobile

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

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
, Analyste programmeurConception oznogco multimédia (https://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

    Ajouter un commentaire
    Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
    Votre évaluation du tutoriel

    8/10 sur 1 revues.
           Visites : 11713 - Pages vues : 11827
    X

    Trucsweb.com Connexion

    Connexion

    X

    Trucsweb.com Mot de passe perdu

    Connexion

    X

    Trucsweb.com Conditions générales

    Conditions

    Responsabilité

    La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

    Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

    Droit applicable et juridiction compétente

    Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Glossaire

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Trucsweb

    Conditions

    Aucun message!

    Merci.

    X
    Aucun message!
    X

    Trucsweb.com Créer un compte

    Créer un compte

    .
    @