Utiliser des méta-tags spécifiques à iOS en HTML5 - des nuls

En HTML5, vous pouvez inclure des métabalises spécifiques à iOS (système d'exploitation Apple pour iPhone, iPod touch et iPad). Ces balises vous permettent de contrôler l'apparence de votre site ou la façon dont vos utilisateurs interagissent avec celui-ci via l'écran tactile sur un iPhone ou un iPad.

Si un visiteur arrive sur votre site à l'aide d'un appareil qui ne prend pas en charge ces fonctionnalités, le navigateur les ignore tout simplement. Voici une introduction rapide aux tags spécifiques à iOS:

• Cependant, si vous avez d'abord optimisé votre conception pour ces périphériques, vous pouvez empêcher les utilisateurs de faire un panoramique et de zoomer car cela est inutile et peut les rendre confus.

  Pour bloquer les fonctions de panoramique et de zoom sur une page que vous avez conçue pour s'adapter parfaitement à l'écran de l'iPhone ou de l'iPad, utilisez la balise meta viewport, qui définit la largeur de la fenêtre et empêche mise à l'échelle:

  Ce paramètre de méta-balise viewport est mieux utilisé si votre site est conçu pour s'adapter parfaitement à l'écran de votre iPhone. Si votre site n'est pas optimisé pour les petits écrans, il est préférable de ne pas utiliser cette balise META, car vous souhaiterez autoriser les visiteurs à agrandir des sections de la page et à faire défiler le contenu si nécessaire pour lire votre contenu.

• apple-mobile-web-app-capable - Cette méta-étiquette indique au navigateur Safari qu'il n'a pas besoin d'avoir les options de navigation en haut et en bas de l'écran sur l'iPhone ou l'iPod toucher. Il supprime également les options de navigation en haut de l'écran de l'iPad.

  Cette fonctionnalité ne fonctionne pas la première fois qu'une personne visite un site Web. Cela fonctionne uniquement si un visiteur de votre site a mis en signet la page en enregistrant une icône Web Clip. Lorsque quelqu'un utilise le lien de l'icône Web Clip pour visiter votre site, cette balise META cache la navigation.

  Si vous choisissez d'utiliser cette balise, vous devez vous assurer que votre site n'a pas besoin des options de navigation classiques fournies par le navigateur. Lorsque vous supprimez les barres en haut et en bas de l'iPhone et de l'iPad, vous gagnez de l'espace pour vos créations, mais vous perdez les flèches avant et arrière ainsi que d'autres fonctions de navigation intégrées à ces appareils.

  Si vous utilisez cette option, assurez-vous que votre site Web inclut des éléments de navigation pour aider les visiteurs à se déplacer sur votre site Web.

• apple-mobile-web-app-status-bar-style - Le style par défaut de la barre d'outils sur un iPhone ou un iPad est noir opaque. Si vous souhaitez modifier le style de la barre d'état en un noir translucide, vous pouvez utiliser une autre balise META spécifique à iOS. Cette balise meta fonctionne également uniquement si l'utilisateur visite un site Web via le lien d'une icône Web Clip.

Si vous supprimez les deux barres d'interface et que vous définissez la barre d'état sur translucide, vous disposez de 124 lignes de pixels horizontales supplémentaires dans Safari sur l'iPhone et l'iPod touch.C'est plus de 25 pour cent de plus de place sur le petit écran! Une barre d'état noire translucide permet également au contenu de la page de circuler sous la barre d'état.