Nicolas Grillet

Intégrateur Web

Télécharger mon CV Contactez moi

Developpement // Astuces pour une charte graphique pour site iPhone

nicoss01 - 15/05/2011

Je viens de finir de développer une version mobile de mon site et je me suis rendu compte qu’il est difficile de trouver toutes les astuces pour le développement pour smartphone.
J’ai donc décidé de vous donner quelques astuces que j’ai trouvé pour une charte graphique iPhone.

Tester son site avec un emulateur iPhone

Voici quelques sites internet qui permettent de tester la version iphone de votre site internet :

Vous trouverez un excellent tutoriel sur les différentes méthodes pour tester votre site sur ce site http://www.lafermeduweb.net/billet/tester-son-site-web-sur-iphone-269.html

Détecter la navigation sur un site avec un iPhone

Vous pouvez rediriger l’internaute grâce à PHP en vérifiant le User-Agent :

if (stripos($_SERVER['HTTP_USER_AGENT'], 'iPhone')){
      header("Location:page_HTML_pour_Iphone.php");
}

Supprimer la barre d’adresse de Safari Mobile

En utilisant le code suivant, vous déplacez automatiquement la barre de défilement pour ne pas afficher la barre d’adresse de Safari Mobile.
Pour cela, utilisez le code Javascript suivant :

window.scrollTo(0, 1);

Vérifier l’orientation de l’appareil

En utilisant le code suivant, lorsque la page charge, une classe CSS « portrait » ou « paysage » est appliquée à la balise body.
Il faut ensuite créer des styles CSS adaptés.

var miseAJourOrientation = function() {
  if (window.innerWidth != currentWidth) {
    currentWidth = window.innerWidth;
    var orientation = (currentWidth == 320) ? "portrait" : "paysage";
    document.body.setAttribute("class", orientation);
    window.scrollTo(0, 1);
  }
};
iPhone.DomLoad(miseAJourOrientation);
setInterval(miseAJourOrientation , 500);

Balises META spécifiques

Avec ces balises META, vous pourrez modifier le comportement du navigateur pour une page HTML.
Voici quel sont les propriétés utilisables :

Nom de la propriété Utilité Valeur par défaut
width Largeur de la page 980
height Hauteur de la page hauteur de l’écran
inital-scale Echelle par défaut Adapté à l’écran
user-scalable Possibilité pour l’utilisateur de zoomer sur la page yes
minimum-scale Echelle minimum 0.25
maximum-scale Echelle maximum 1.6

Pour la syntaxe faites comme ceci :

<meta name="viewport" content="initial-scale=2.3, user-scalable=no" />
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

Lien « click to call »

Ce type de lien permet au téléphone de composer automatiquement un numéro en cliquant sur un lien.

<a href="tel:+33123456789">01 23 45 67 89</a>

Alternative à la pseudo class :HOVER

Comme la pseudo class hover n’est pas supportée, il y a une alternative Javascript qui consiste à ajouter une classe CSS « hover » lors du survol d’un lien.

var liensHTML = document.getElementsByTagName('a');
for(var i = 0; i > liensHTML.length; i++)
{
    liensHTML[i].addEventListener('touchstart', function(){this.className = "hover";}, false);
    liensHTML[i].addEventListener('touchend', function(){this.className = "";}, false);
}

Ensuite il ne vous reste plus qu’à créer un style CSS adapté :

a:hover, a.hover {  }

Informations utiles à connaitre

Voici des informations sur la compatibilité avec les navigateurs mobiles tel que SAfari Mobile:

  • Formats d’image supportés : GIF, PNG, JPEG et TIFF
  • Evenements Javascript non supportés : mouseover et mouseout
  • Evenement Javascript utilisables uniquement sur smartphone : touchstart et touchend
  • La pseudo class :hover n’est pas supportée (cf : astuce sur pseudo class hover)
  • Les popups sont par défaut bloqués

Evenements Javascript pour iPhone

Evenement Safari iPhone
onabort 1.0 1.0
onbeforecopy 1.3
onbeforecut 1.3
onbeforepaste 1.3
onbeforeunload 1.3
onblur 1.0 1.0
onchange 1.0 1.0
onclick 1.0 1.0
oncontextmenu 1.1
oncopy 1.3
oncut 1.3
ondblclick 1.0
ondrag 1.3
ondragend 1.3
ondragenter 1.3
ondragleave 1.3
ondragover 1.3
ondragstart 1.3
ondrop 1.3
onerror 1.0 1.0
onfocus 1.0 1.0
ongesturechange 2.0
ongestureend 2.0
ongesturestart 2.0
oninput 1.3 1.0
onkeydown 1.0 1.0
onkeypress 1.0 1.0
onkeyup 1.0 1.0
onload 1.0 1.0
onmousedown 1.0 1.0
onmousemove 1.0 1.0
onmouseout 1.0 1.0
onmouseover 1.0 1.0
onmouseup 1.0 1.0
onmousewheel 1.0 1.0
onorientationchange 1.1
onpaste 1.3
onreset 1.0 1.0
onresize 1.0 1.0
onscroll 1.2 1.0
onsearch 1.3
onselect 1.0 1.0
onselectstart 1.3
onsubmit 1.0 1.0
ontouchcancel 2.0
ontouchend 2.0
ontouchmove 2.0
ontouchstart 2.0
onunload 2.1

Liste des selecteurs CSS3 disponibles sur iPhone

  • *
  • E
  • .class
  • #id
  • E F
  • E > F
  • E + F
  • E[attribute]
  • E[attribute=value]
  • E[attribute~=value]
  • E[attribute|=value]
  • :first-child
  • :link
  • :visited
  • :lang()
  • :before
  • ::before
  • :after
  • ::after
  • :first-letter
  • ::first-letter
  • :first-line
  • ::first-line
  • E[attribute^=value]
  • E[attribute$=value]
  • E[attribute*=value]
  • E ~ F
  • :root
  • :last-child
  • :only-child
  • :nth-child()
  • :nth-last-child()
  • :first-of-type
  • :last-of-type
  • :only-of-type
  • :nth-of-type()
  • :nth-last-of-type()
  • :empty
  • :not()
  • :target
  • :enabled
  • :disabled
  • :checked

Leave a Comment

You must be logged in to post a comment.

Laisser un commentaire

Copyright Nicolas Grillet