Les diverses spécifications de la meta viewport
La balise HTML META contient les "Meta-informations" informations utilisées entre autres part le navigateur.
Pour les supports mobiles ou tablettes vous pouvez contrôler l'apparence de l'affichage initial de la page en utilisant la balise HTML META avec l'attribut name à viewport et dont l'attribut content pourra contenir plusieures propriétés séparées par des virgules : width, height, initial-scale, maximum-scale, minimum-scale, user-scalable. Pour les autres supports, la balise Meta Viewport ne sera pas interprétée.<meta name="viewport" content="width=device-width, initial-scale=1">
Attention, l'utilisation de la balise HTML Meta Viewport, a des incidences sur les propriétés CSS de la Media Query.
Vous pouvez tester les effets de la balise HTML Meta Viewport : Tester la balise Meta Viewport
width
La propriété width spécifie la largeur de la fenêtre en pixels. La propriété width accepte comme valeur un entier positif ou le mot clé device-width qui correspond à la largeur de l'appareil disponible. device-width est variable suivant les appareils.
Si vous ne mettez pas de propriété width, la largeur de la fenêtre par défaut est variable suivant les appareils et varie suivant le mode portrait ou paysage; même remarque pour la propriété height.
Par exemple, la taille de la fenêtre pour l'iPhone 4 est 640x960px et son device-(width/height) est égale à 320x480px.
<meta name="viewport" content="width=device-width">
height
La propriété height spécifie la hauteur de la fenêtre en pixels. La propriété height accepte comme valeur un entier positif ou le mot clé device-height qui correspond à la hauteur de l'appareil disponible. device-height est variable suivant les appareils.
<meta name="viewport" content="height=device-height">
initial-scale
La propriété initial-scale spécifie l'échelle de la fenêtre (zoom). La propriété initial-scale accepte comme valeur un nombre comprit entre > 0.0 et 10.0. la valeur multiplié par width ou height;
La propriété initial-scale n'est pas reconnue pour le moment pour Internet Explorer pour Windows Phone (04-2013).
<meta name="viewport" content="initial-scale=1.0">
maximum-scale
La propriété maximum-scale spécifie l'échelle maximale de la fenêtre (zoom). La propriété maximum-scale accepte comme valeur un nombre comprit entre > 0.0 et 10.0
Si la propriété maximum-scale a comme valeur 1.0 alors la modification l'échelle de la fenêtre n'est pas possible.
Dans l'exemple, l'internaute ne pourra pas zoomer au dessus de 5.
La propriété maximum-scale n'est pas reconnue pour le moment pour Internet Explorer pour Windows Phone (04-2013).
<meta name="viewport" content="maximum-scale=5.0">
minimum-scale
La propriété minimum-scale spécifie l'échelle minimale de la fenêtre (zoom). La propriété minimum-scale accepte comme valeur un nombre comprit entre > 0.0 et 10.0.
Dans l'exemple, l'internaute ne pourra pas dé-zoomer au dessous de 0.5.
La propriété minimum-scale n'est pas reconnue pour le moment pour Internet Explorer pour Windows Phone (04-2013).
<meta name="viewport" content="minimum-scale=0.5">
user-scalable
La propriété user-scalable spécifie si l'internaute modifier l'échelle de la fenêtre (zoomer). La propriété user-scalable peut prendre de yes autorise la modification l'échelle de la fenêtre ou no interdit la modification l'échelle de la fenêtre. La propriété user-scalable n'est pas reconnue pour le moment pour Internet Explorer pour Windows Phone (04-2013).
<meta name="viewport" content="user-scalable=no">
target-densitydpi
La propriété target-densitydpi spécifie la densité de pixel cible pour lequel la page Web est conçu.
La propriété target-densitydpi est devenue obsolète sur webkit, cependant il semble que Chrome, Opera l'utilisent.
La propriété target-densitydpi n'est pas reconnue pour le moment pour Internet Explorer pour Windows Phone (04-2013).
La propriété target-densitydpi peut prendre la valeur de :
device-dpi : Indique que la densité de pixels d'origine de l'appareil qui doit être utilisée. Mise à l'échelle par défaut ne se produit jamais.
high-dpi : Indique que le contenu est destiné aux écrans à haute densité.
medium-dpi : Indique que le contenu est destiné aux écrans de moyenne densité.
low-dpi : Indique que le contenu est destiné aux écrans à faible densité.
nombre entier positif : Indique une valeur dpi entre 70 et 400 pour l'utiliser comme cible dpi.
<meta name="viewport" content="target-densitydpi=medium-dpi">
Compatibilité Meta navigateurs
Voici les compatibilités de la balise HTML Meta Viewport.
Les diverses spécifications de la css @viewport
La propriété css @viewport est introduite en CSS3. Elle est censée faire la même chose que la balise meta viewport mais en CSS. Cependant la propriété css @viewport reste à ce jour peu ou partiellement reconnue ce qui pose problème.
La propriété css @viewport accepte comme propriétés css : width, min-width, max-width, height, min-height, max-height, zoom, min-zoom, max-zoom, user-zoom, orientation. @viewport {
width: 320px;
zoom: 0.5;
}
width
La propriété css width est un raccourcit pour spécifier la propriété css min-width et max-width. La propriété css width accepte deux valeurs séparées par un espace : la première est la valeur de min-width et la seconde la valeur de max-width ; Si une seule valeur elle est appliquée aux deux propriétés CSS.
@viewport {
width: auto, device-width;
} min-width
La propriété css min-width permet de spécifier largueur minimale à l'affichage de la page.
La propriété css min-width accepte comme valeur :
auto : la largeur initiale de l'écran disponible à l'échelle 1.0 (initial-width/zoom). Valeur par défaut
device-width : la largeur de l'écran disponible à l'échelle 1.0.
device-height : la hauteur de l'écran disponible à l'échelle 1.0.
Nombre positif suivit d'une unité absolue ou relative (px,em,...).
Nombre positif suivit de %, relatif à la largeur initiale de l'écran disponible à l'échelle 1.0.
@viewport {
min-width: 320px;
}
max-width
La propriété css max-width permet de spécifier largueur maximale à l'affichage de la page. La propriété css max-width accepte les même valeurs que min-width
@viewport {
max-width: 320px;
} height
La propriété css height est un raccourcit pour spécifier la propriété css min-height et max-height. La propriété css height accepte deux valeurs séparées par un espace : la première est la valeur de min-height et la seconde la valeur de max-height ; Si une seule valeur, elle est appliquée aux deux propriétés CSS.
@viewport {
height: device-height, auto;
} min-height
La propriété css min-height permet de spécifier hauteur minimale à l'affichage de la page.
La propriété css min-height accepte comme valeur :
auto : la largeur initiale de l'écran disponible à l'échelle 1.0 (initial-height/zoom). Valeur par défaut
device-width : la largeur de l'écran disponible à l'échelle 1.0 (initial-width).
device-height : la hauteur de l'écran disponible à l'échelle 1.0 (initial-height).
Nombre positif suivit d'une unité absolue ou relative (px,em,...).
Nombre positif suivit de %, relatif à la largeur initiale de l'écran disponible à l'échelle 1.0.
@viewport {
min-height: 320px;
} max-height
La propriété css max-height permet de spécifier hauteur maximale à l'affichage de la page. La propriété css max-height accepte les mêmes valeurs que min-height.
@viewport {
max-height: 620px;
} zoom
La propriété css zoom permet de spécifier l'échelle de la fenêtre (zoom) à l'affichage de la page.
La propriété css zoom accepte comme valeur :
auto : calcule automatiquement. Valeur par défaut
nombre positif comprit entre 0.0 et 10.0. 1.0 estla taille initiale
nombre positif suivit de %. 100% la taille initiale.
@viewport {
zoom: 0.5;
} min-zoom
La propriété css min-zoom permet de spécifier l'échelle minimale de la fenêtre (zoom).
La propriété css min-zoom accepte comme valeur :
auto : calcule automatiquement. Valeur par défaut
nombre positif comprit entre 0.0 et 10.0. 1.0 est la taille initiale
nombre positif suivit de %. 100% la taille initiale.
@viewport {
min-zoom: 10%;
} max-zoom
La propriété css max-zoom va vous permettre de spécifier l'échelle maximale de la fenêtre (zoom).
La propriété css max-zoom accepte comme valeur :
auto : calcule automatiquement. Valeur par défaut
nombre positif comprit entre 0.0 et 10.0. 1.0 est la taille initiale
nombre positif suivit de %. 100% la taille initiale.
@viewport {
max-zoom: 9.0;
} user-zoom
La propriété css user-zoom spécifie si on autorise la modification l'échelle de la fenêtre .
La propriété css user-zoom peut prendre le valeur de :
zoom : on autorise le changement d'échelle.
fixe : on n'autorise pas le changement d'échelle.
@viewport {
user-zoom: zoom;
} orientation
La propriété css orientation spécifie si l'affichage se fait en mode paysage ou portrait.
La propriété css orientation peut prendre la valeur de :
auto : la page est affichée suivant l'orientation de l'appareil.
portrait : la page est verrouillée en mode portrait.
landscape : la page est verrouillée en mode paysage.
@viewport {
orientation: portrait;
} Compatibilité @viewport navigateurs
La propriété css @viewport n'est pas prise en compte à ce jour (04-2013), mais Internet Explorer et Opera ont une version identique préfixée (-ms-, -o-).
Les @viewport spécifiques aux navigateurs
-o-viewport d'Opera
La propriéte css @-o-viewport est Opera Mobile, Opera Mini et Opera 11+. La propriété css orientation n'est pas reconnue par Opera
@-o-viewport {
width: 320px;
zoom: 0.5;
}
-ms-viewport d'Internet Explorer
La propriéte css les propriétés @-ms-viewport La propriéte css @-ms-viewport est compatible Internet Explorer 10+ et ne reconnait que la propriété css width et height. Et n'accepte qu'une seule valeur.
@-ms-viewport {
width: device-width;
}