Les balises méta pour mobile - doivent-elles être utilisées?
Les balises méta "Viewport", "MobileOptimized" et "HandheldFriendly" peuvent être utilisées pour fournir un contenu HTML correctement formaté aux appareils mobiles. Ces balises sont-elles de bonnes choses? Ils semblent assez spécifiques à la plate-forme dans de nombreux cas, et même lorsqu'ils ne sont pas spécifiques à la plate-forme (fenêtre d'affichage), ils semblent nécessiter des attributs spécifiques au périphérique pour fonctionner correctement.
Devraient-ils être utilisés? Où et quand est-il approprié de les utiliser? Existe-t-il des alternatives (sans reconnaissance utilisateur-agent)?
Remarque: j'ai utilisé des requêtes multimédia CSS pour obtenir une prise en charge mobile, mais cela nécessite un peu d'UAR afin d'obtenir une taille de police optimale.
La réponse simple est: viewport est bon, les autres sont ... moins bons.
fenêtre
viewport est un norme de facto largement prise en charge - créé à l'origine par Apple pour mobile Safari sur iPhone, il a été adopté par presque tous les autres navigateurs mobiles : Opera Mobile, iPhone, Android, Iris, IE, BlackBerry, Obigo, Firefox
Exemple d'utilisation simple: rendre le site pleine largeur sur mobile:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
Les deux autres sont des "normes" de facto plus anciennes pour les "téléphones de fonction" - qui sont généralement trop anciennes pour prendre en charge viewport:
HandheldFriendly
Cette balise était à l'origine utilisée pour identifier le contenu mobile dans les navigateurs AvantGo, mais est devenue une norme générale pour identifier les sites Web mobiles. Cependant, la gamme de navigateurs prenant en charge cette balise META est inconnue:
<meta name="HandheldFriendly" content="true"/>
MobileOptimized
Il s'agit d'une balise Meta propriétaire de Windows qui a finalement été utilisée comme un autre moyen d'identifier le contenu mobile. L'inconvénient de cette balise est qu'une largeur spécifique doit être donnée. Encore une fois, on ne sait pas quel est le support de cette balise:
<meta name="MobileOptimized" content="320"/>
Sommaire
Utilisez viewport sauf si vous avez besoin pour prendre en charge les téléphones plus anciens qui ne le prennent pas en charge, auquel cas, utilisez probablement à la fois HandheldFriendly et MobileOptimized - mais testez vos appareils cibles et découvrez .
Devraient-ils être utilisés? Où et quand est-il approprié de les utiliser? Existe-t-il des alternatives (sans reconnaissance utilisateur-agent)?
Ils doivent être utilisés lorsque vous souhaitez que les effets qu'ils créent - en général, indiquent aux téléphones le zoom par défaut à utiliser, contrôlent le redimensionnement, etc. C'est une bonne explication des raisons pour lesquelles vous pouvez utiliser la fenêtre d'affichage, par exemple: http://davidbcalhoun.com/2010/viewport-metatag - il répertorie également les autres propriétés que vous pouvez définir avec viewport et ce qu'elles font.
La seule autre façon d'obtenir ces effets, sans utiliser ces métabalises, est d'utiliser des astuces JS géniales - qui seront plus lentes, nécessiteront le chargement de scripts, seront difficiles à maintenir et ne seront pas fiables. Les navigateurs qui ne prennent pas en charge viewport auront probablement une interface JS très boguée pour afficher les éléments liés; voir les liens quirksmode ci-dessous.
Les références
- Pour une vraiment explication complète de tout ce sujet, voir http://www.quirksmode.org/mobile/viewports.html & http://www.quirksmode.org/mobile/viewports2.html
- https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
- http://davidbcalhoun.com/tag/mobileoptimized
- http://www.quirksmode.org/mobile/ & http://www.quirksmode.org/mobile/tableViewport.html
- http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
L'iPhone utilise Safari comme navigateur. Ils ont un page développeur qui vous donne quelques informations sur l'utilisation de la fenêtre d'affichage des balises META:
Par exemple, si votre page Web est plus étroite que 980 pixels, vous devez définir la largeur de la fenêtre d'affichage pour l'adapter à votre contenu Web.
Il est utilisé comme ceci:
<META name="viewport" content="width = 650" />
<META name="viewport" content="width = device-width" />
<META name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
Un autre article qui pourrait être intéressant pour vous est Une liste à part: " Mettez votre contenu dans ma poche ".