Chez momo-fr

Balises META et ergonomie pour le multitouch

Les balises META et le multitouch

Si les balises META sont connues pour décrire le contenu de la page ou pour définir des mots-clés, il existe également des balises META spécifiques au web mobile

Elles sont indiqués pour mieux définir le comportement des navigateurs (iOS en particulier) et on peut adjoindre des liens spécifiques pour améliorer l’ergonomie lors d’une visite sur smartphone par exemple (gestion des appels sur N° de téléphone…).

Les balises META

apple-mobile-web-app-capable
C’est une balise spécifique pour les terminaux mobiles Apple (iPhone, iPad) indiquant si la page web doit s’exécuter en mode « web app » c’est-à-dire en plein écran, sans la barre d’adresse. La propriété Javascript window.navigator.standalone correspondante permet de déterminer si la page est affichée en plein écran ou non.

<meta name= "apple-mobile-web-app-capable" content="yes">

apple-mobile-web-app-status-bar-style
Elle est utilisée conjointement avec apple-mobile-web-app-capable, pour permettre de définir l’apparence de la barre d’état. Les valeurs possibles sont default, black et black-translucent.

<meta name="apple-mobile-web-app-status-bar-style" content="black">

format-detection
Part défaut certains smartphones reconnaissent des numéros de téléphone dans la page (iOS), ce qui peut être parfois ennuyeux  quand il n’y a pas de numéro de téléphone, ou parce que l’aspect des numéros sans trouve modifié (CSS). Cette balise permet de contrôler ce comportement en le désactivant par exemple.

<meta name="format-detection" content="telephone=no">

HandheldFriendly
Une des plus anciennes balises META dédiées au mobile. Celle-ci indique tout simplement au navigateur que l’affichage du site est déjà optimisé pour le mobile et que ce n’est pas la peine d’effectuer de mise à l’échelle de l’affichage.

<meta name="HandheldFriendly" content="true" />

viewport
Par défaut les smartphones adaptent l’affichage d’une page en zoomant, afin de fournir la meilleure expérience possible, ce qui peut dans certains cas ne pas convenir.
La balise META viewport permet de contrôler l’apparence de l’affichage de la page sur un smartphone.

<meta name = "viewport" content = "width = 320, initial-scale = 2.3, user-scalable = no">

Les liens « a » dans le HTML

Les hyperliens HTML sont utilisés régulièrement et vous les connaissez, mais il est possible de détourner ou personnaliser un lien pour un usage spécifique :

Par exemple pour envoyer un e-mail avec

<a href="maillto:Adresse_électronique">Contact courriel</a>

ou plus complet (avec sujet du message intégré) :

<a href="maillto:Adresse_électronique?subject=Mon sujet de message">Contact courriel</a>

Pour pointer vers un contact Skype

<a href="callto:Pseudo_Skype">Contact Skype</a>

Avec iOS on peut demander l’ouverture d’une application native pour un contact vers FaceTime ou Skype

FaceTime

<a href="facetime:numéro_de_téléphone">Contactez-moi avec FaceTime</a>
<a href="facetime:adresse_email">Contactez-moi avec FaceTime</a>

Deux possibilités avec le numéro de téléphone ou l’adresse e-mail pour FaceTime.

Slype

<a href="skype:skype_user?call">Appelez-moi avec Skype</a>

L'ajout du code "?call" après le Pseudo démarre directement l’appel.

Sources : Expeert.com, JawsActions, Facetime Apple

Vous aimerez aussi

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Plus de résultats...

Generic selectors
Corespondance exacte
Rechercher dans le titre
Rechercher dans le contenu
Post Type Selectors

Autres catégories du Blog

Partager cette publication