Configuration d'une application Web iPhone avec des balises méta

Les applications Web iPhone sont sous-estimées dans le développement de l'iPhone. Cependant, ils sont étonnamment faciles à installer. Le processus ne nécessite que quelques Méta Mots clés.


Étape 1: Regarder l'application Web

Il est préférable de créer d'abord l'application Web, puis de la configurer dans une application Web pour iPhone..

L'application elle-même, dans ce cas, est une simple page qui indique l'heure. En conséquence, l'application est nommée 'Temps'. Il utilise jQuery pour obtenir le résultat final. J'ai utilisé le plug-in jQuery Clock pour le faire en seulement quelques lignes de jQuery.

 

Étape 2: Définition du nom de l'application

C'est peut-être la plus simple de toutes les étapes. Tout ce qui est nécessaire est de changer le Titre marquez le nom de votre application Web.

  Temps

Étape 3: Définition de l'icône de l'application

L'étape suivante consiste à définir l'icône de l'application. Il s’agit de l’icône 57px par 57px qui apparaît sur l’écran d’accueil de l’iPhone. Sur les périphériques d’affichage Retina, il s’agit d’une icône de 114 x 114 x 114 pixels, que vous pouvez utiliser en utilisant simplement l’icône de résolution supérieure (les périphériques plus anciens réduiront automatiquement la taille). Je vais utiliser l'icône suivante pour ce tutoriel:

Il y a deux options pour configurer cette icône. La première consiste à utiliser l'icône telle quelle, tout ce qui est ajouté sont des coins arrondis. Pour ce faire, nous utilisons ceci Méta étiquette:

 

La deuxième option donne à l’icône la pomme standard brillant:

 

J'ai choisi l'icône précomposée et le résultat final est le suivant:


Étape 4: Configuration de l'écran de démarrage

Pendant le chargement de votre application Web, vous pouvez choisir d’afficher un écran de démarrage. Cette image devrait être 320px x 460px. Pour cela, utilisez cette Méta tag dans le Tête de votre document.

 

Ceci est le résultat final de l'écran de démarrage.


Étape 5: Rendre l'application en plein écran

L'étape suivante consiste à supprimer les barres d'outils et barres de menus Apple par défaut. Ce sont ceux qui affichent l’adresse Web et qui effectuent une recherche en haut et qui affichent le signet, les boutons Précédent et Suivant en bas. Ceci est fait avec ce qui suit Méta étiquette:

 

Étape 6: Définition du style de la barre d'état

Vous pouvez également définir le style de la barre d'état. C'est la barre située en haut de l'écran qui affiche des informations telles que la force du signal, la puissance de la batterie et du signal Wi-Fi. Pour que cela fonctionne, l’application doit être configurée en plein écran comme à l’étape 5. Pour cela, Méta tag il y a trois options.

Le premier est le dégradé de gris normal:

 

La seconde est une barre d'état solide, c'est la meilleure option:

 

La dernière est une barre d'état transparente, permettant à l'utilisateur de voir à travers la barre d'état:

 

Notre barre d'état final:


Étape 7: Configuration de la fenêtre

Ce Méta balise indique au périphérique la largeur de la page à afficher, les valeurs minimale et maximale du zoom, la valeur initiale du zoom et indique si l'utilisateur peut effectuer un zoom avant ou arrière. Si votre site Web mesure moins de 980 pixels (la largeur par défaut de l'affichage de la page Web), la largeur doit être définie avec cette balise. De plus, si l'application est spécifique à l'iPhone, la largeur doit être définie sur celle de l'iPhone, de l'iPad ou de l'iPod Touch. Il faut également garder à l’esprit que, au lieu d’utiliser la valeur réelle de la largeur et de la hauteur de l’écran, les valeurs de 'device-width' et 'hauteur de l'appareil' Devrait être utilisé. Voici quelques exemples de balises:

  

Voici toutes les options disponibles:

  • largeur - Largeur de la fenêtre en pixels. [Par défaut: 980, plage: 200 - 10 000]
  • la taille - Hauteur de la fenêtre en pixels. [Par défaut: calculé avec la largeur et le format de l'appareil, plage: 223 - 10 000]
  • échelle initiale - L'échelle initiale de la fenêtre. [Par défaut: calculé pour correspondre à la page Web dans la zone disponible, Gamme: calculé avec échelle minimale et échelle maximale Propriétés.]
  • échelle minimale - L'échelle minimale de la fenêtre. [Par défaut: 0.25, Plage:> 0 - 10]
  • échelle maximale - L'échelle maximale de la fenêtre. [Par défaut: 1.6, Plage:> 0 - 10]
  • évolutif - Si l'utilisateur peut zoomer et dézoomer. [Par défaut: oui, Options: oui ou non]

Étape 8: Test de l'application Web

Nous avons maintenant terminé la configuration de l'application Web, ajoutons-la à notre appareil..

  • Accédez à l'emplacement de l'application sur votre site Web..
  • Appuyez sur le bouton "plus" en bas de l'écran.
  • Appuyez sur 'Ajouter à l'écran d'accueil'.
  • Appuyez sur 'Ajouter'

L'application Web est maintenant effectivement "installée".


Conclusion

Maintenant, avec la configuration de votre application, vous pourrez le lancer à partir de l'écran d'accueil, puis voir l'écran de démarrage pendant son chargement. Une fois chargée, l'application doit être en plein écran avec la barre d'état choisie.

Prévisualisez l'application finale en téléchargeant le fichier zip joint. Pour le tester sur votre appareil iOS, vous devez placer le code en ligne..

J'espère que vous avez apprécié ce tutoriel et merci d'avoir lu.