Présentation de la balise META Viewport
La balise html META Viewport est une balise qui va permettre de définir les dimension d’une page web pour des petits supports tels que l’iPod, l’iPhone… C’est donc une balise utile qui offre un meilleur confort visuel aux différents utilisateurs de ces technologies.
Fonctionnement de la balise META Viewport
Cette balise doit s’utiliser avec les attributs NAME et CONTENT. Il existe un certain nombre de valeurs qui vont définir la dimension de la page : « width » (largeur), « initial-scale=2.0 » (ouverture d’une page en zoomant 2 fois), « width=device-width » (ouverture d’une page en plein largeur), etc.
Exemples (langage html) :
1 2 3 |
name="Viewport" content="width=550"> name="Viewport" content="initial-scale=2.0"> name="Viewport" content="width=device-width"> |
1.Avant de commencer il faut déclrer un Doctype pour les mobiles.
<?xml version= »1.0″ encoding= »UTF-8″?>
html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN"
"http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> sources : http://en.wikipedia.org/wiki/XHTML_Mobile_Profile
2. Optimization du Meta Tag
Pour Microsoft metre la taille en pixelname="MobileOptimized" content="width" />
See this META tag reference at Microsoft for the tag’s interpretation in Windows Mobile 5.
Pour les palm et les tubasname="HandheldFriendly" content="true" />
For example, Opera Mobile uses a default viewport width of 850 pixels, and the iPhone uses a default width of 980 pixels.
Pour la pluspart des navigateurs mobile le tag view port est appropirié
par défaut : Opéra mobile = 850 pixels
Safari = 980 pixels
Here is a simplified version of the Viewport tag that sets the browser viewport width at 240 pixels and disables user scaling of the content:
name="viewport" content="width=240,user-scalable=no" />
This table lists the meanings and values of all supported directives of the Viewport META tag.
| Viewport META directive | Example Value | Description |
| width | width=320width=device-width | Logical width of the viewport, in pixels. The special device-width value indicates that the viewport height should be the screen width of the device. |
| height | height=480height=device-height | Logical height of the viewport, in pixels. The special device-height value indicates that the viewport height should be the screen height of the device. |
| user-scalable | user-scalable=no | Specifies whether the user can zoom in and out of the viewport, scaling the view of a Web page. Possible values are yes or no. |
| initial-scale | initial-scale=2.0 | Sets the initial scaling or zoom factor (or multiplier) used for viewing a Web page. A value of 1.0 displays an unscaled Web document. |
| maximum-scale | maximum-scale=2.5 | Sets the user’s maximum limit for scaling or zooming a Web page. Values are numeric and can range from 0.25 to 10.0. The value of this directives is a scaling factor or multiplier applied to the viewport contents. |
| minimum-scale | minimum-scale=0.5 | Sets the user’s minimum limit for scaling or zooming a Web page. Values are numeric and can range from 0.25 to 10.0. The value of this directives is a scaling factor or multiplier applied to the viewport contents. |
For more details about the possible directives and values of the Viewport META tag, see the Supported Meta Tags section of the Safari HTML Reference.
name= »MobileOptimized » content= »480″ />
name= »format-detection » content= »telephone=no »>
name= »apple-mobile-web-app-capable » content= »yes »>
name= »Viewport » content= »width=400″>
Normalize em-size for BlackBerry OS6
No milestone
All browsers in the universe (that I know of) use a default em-size of 16px. The only exception to this rule is BlackBerry OS6 which uses different default font-sizes on different devices. I’ve seen 22px and even 17px. This causes serious layout issues in em-based layouts on these devices.
The way to solve this is to put the following code into the stylesheet
:root {font-size: 16px;}
This will normalize the base font-size for all current and future browsers. It does remove the ability to adjust the font-size in the browser in IE9 though so you might want to put the code in a somewhat restricting mediaquery:
@media all and (max-width: 480px) {:root {font-size: 16px;}}
