Web mobile – La balise META Viewport – HTML

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 pixel
name="MobileOptimized" content="width" />

See this META tag reference at Microsoft for the tag’s interpretation in Windows Mobile 5.

Pour  les palm et les tubas
name="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 directiveExample ValueDescription
widthwidth=320
width=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.
heightheight=480
height=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-scalableuser-scalable=noSpecifies 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-scaleinitial-scale=2.0Sets 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-scalemaximum-scale=2.5Sets 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-scaleminimum-scale=0.5Sets 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

No one is assigned

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;}}
%d blogueurs aiment cette page :