Share
Aujourd'hui, je vais vous montrer comment créer une page de remplacement et une feuille de style pour iPhone et iTouch. Nous verrons comment détecter si l'utilisateur utilise un iPhone pour afficher votre page ainsi que l'orientation de l'appareil, que ce soit en mode paysage ou en mode portrait. Pour ce faire, nous utiliserons javascript et des balises CSS spécifiques à Safari Mobile..
Nous allons commencer avec 2 psd que j'ai créés et les faire fonctionner sur une page iPhone. J'utilise des images pour l'arrière-plan et l'en-tête, bien que vous puissiez utiliser uniquement des couleurs droites au lieu d'images. L'avantage de ne pas utiliser les images, c'est que le chargement est évidemment plus rapide, mais il faut un moment pour charger les images, en fonction de leur taille. Vous pouvez trouver les fichiers source psd ici ou vous pouvez créer les vôtres. Il convient de garder à l’esprit que nous construisons une page spécialement pour l’iPhone ou l’iTouch. Si vous ne possédez pas l'appareil vous-même, vous pouvez télécharger gratuitement le kit de développement logiciel (SDK) pour iPhone auprès d'Apple. Ce dernier inclut un simulateur pour iPhone. Si vous souhaitez détecter l'iPhone sur votre page de navigateur standard et charger les css et html de l'iPhone via des instructions conditionnelles ou envoyer entièrement l'utilisateur à une autre page, utilisez le code suivant:
Le code ci-dessus a expliqué:
Ci-dessous, le code utilisera des instructions conditionnelles html pour masquer le code d'un navigateur standard..
Nous savons donc maintenant comment diriger l'utilisateur vers la page de votre iPhone s'il se trouve sur un iPhone ou un appareil iTouch. Maintenant, nous allons commencer à travailler sur la page HTML de l'iPhone; le code ci-dessous présente quelques différences essentielles par rapport à un document de transition XHTML standard.
Ma page iPhone
Le code ci-dessus expliqué ligne par ligne:
Nous continuons maintenant avec le reste du code HTML avant d’ajouter des fonctions javascript pour la détection de l’orientation. Commencez par terminer la tête puis commencez le corps. Dans l'élément body, nous ajoutons onorientationchange = orient () ;. Donc, je viens de mentir, c’est un peu de javascript, mais c’est nécessaire pour appeler notre fonction "orient" (nous y reviendrons dans un instant) chaque fois que l’appareil détecte une orientation différente.
Ceci est la zone de contenu principale de la page.
En utilisant css et javascript, nous pouvons manipuler n'importe lequel de ces divs en utilisant un fichier css alternatif. Les fichiers css de ce projet sont destinés aux vues paysage et portrait.
Encore un texte de remplissage ici pour illustrer la page.
Dans l'en-tête de la page, vous voudrez placer le code vu ci-dessous
switch (window.orientation) fonctionne en dehors de la méthode onorientationchange () dans l'élément body. Cela vérifiera si la rotation actuelle est égale à la "valeur de casse", si elle retourne true, elle exécutera ce qui est après les deux points. Quand une orientation est assortie, elle sort de orient () ;. window.onload () exécute la fonction orient lorsque le chargement de la page est terminé.
Après chaque cas (valeur): nous avons javascript pointant sur l'id des éléments de lien auquel notre fichier css est attaché. En fonction de la valeur de cas, 0, 90 ou -90 (il en existe aussi 180, mais le fichier css portrait ou paysage n'est pas pris en charge pour le moment) est attaché à la balise href dans l'élément link. 0 est vertical (portrait), 90 est paysage en sens inverse des aiguilles d'une montre. -90 est le paysage tourné dans le sens des aiguilles d'une montre et 180, bien que non pris en charge, représenterait le périphérique à l'envers.
Même avec tout ce code, la page ne fait pas grand chose. C'est parce que nous devons ajouter des images d'arrière-plan et styliser le tout. Nous allons créer 2 fichiers CSS, un appelé iphone_portrait.css et un autre appelé iphone_landscape.css. Nous allons placer le fichier portrait css dans l’élément link comme fichier css par défaut à utiliser.
corps couleur de fond: # 333; marge supérieure: -0px; marge gauche: -0px; #wrap overflow: auto; largeur: 320px; hauteur: 480px; #header background: url (… /images/header.jpg); répétition de fond: non répétée; hauteur: 149px; #content background: url (… /images/middle.jpg); répéter en arrière-plan: répéter-y; marge supérieure: -5px; p margin: 5px; padding-left: 25px; largeur: 270px; taille de police: 10px; font-family: arial, "san serif"; #bottom background: url (… /images/bottom_corners.jpg); répétition de fond: non répétée; hauteur: 31px; marge supérieure: -5px;
Le code ci-dessus est pour le fichier iphone_portrait.css et est plutôt simple. Certaines choses à noter sont:
Vous trouverez ci-dessous le code à insérer dans le fichier iphone_landscape.css. les seules différences entre les fichiers css portrait et paysage sont les images d’arrière-plan, les dimensions de la pellicule sont inversées et les marges ajustées en conséquence.
corps couleur de fond: # 333; marge supérieure: -0px; marge gauche: -0px; #wrap overflow: auto; largeur: 480px; hauteur: 320px; #header background: url (… /images/l_header.jpg); répétition de fond: non répétée; hauteur: 120px; #content background: url (… /images/l_middle.jpg); répéter en arrière-plan: répéter-y; marge supérieure: -5px; p margin: 5px; padding-left: 25px; largeur: 370px; taille de police: 10px; font-family: arial, "san serif"; #bottom background: url (… /images/l_bottom_corners.jpg); répétition de fond: non répétée; hauteur: 37px; marge supérieure: -5px;
Si vous utilisez mes images d'arrière-plan découpées, votre page devrait maintenant ressembler à l'image ci-dessous en mode portrait..
Ou, en mode paysage?
Alors maintenant que vous avez une page formatée et stylée pour iPhone et iTouch, que pouvez-vous faire d'autre? Eh bien, si votre page est davantage une application Web, vous pouvez consulter IUI de Joe Hewitt, un cadre qui donne à vos pages l’apparence d’applications natives pour iPhone ou iTouch. Gardez également à l’esprit que vous pouvez définir 3 fichiers CSS spécifiques; vous pouvez donc avoir un fichier css qui donne un style à la page s'il est tourné dans le sens horaire en paysage et un fichier différent pour une fois tourné dans le sens inverse des aiguilles d'une montre en paysage. Cela permettra d’obtenir des résultats intéressants. Bonne chance!
Accentsconagua