Je regroupe ici une collection de liens traitant des différentes techniques et particuliarités lorsque l’on veut que son site Web marche également sur l’iPad et l’iPhone. Les 2 principales causes de problèmes sont l’absence de support de Flash et le fait d’être sur un touchscreen.

Ce post n’est pas fixe et d’autres liens viendront s’ajouter au fur et à mesure de mes revues de presse. N’hésitez pas à m’en proposer de nouveaux dans les commentaires. Je privilégie les guides pratiques

  • performances Web et réactivité d'une application Web pour iPad : de bons conseils comme éviter les images, les -webkit-gradient, opacité, text-shadow et box-shadow, et utiliser -webkit-transform avec parcimonie
  • observer les requêtes (HTTP et autres) faites par l'iPad / iPhone, via le wifi, un proxy et Charles. En bonus, on peut même savoir quelles sont les requêtes faites par les applications commerciales.
  • l'iPad et le support des fonts. Vous aurez probablement à supporter l'iPad dans les 6 mois à venir, aussi si vous comptiez sur son support CSS3/HTML5 pour faire quelque chose de moderne avec les fonts (au détriment des IEs...), il semble que celui ci soit (encore une fois) assez spécifique, voire bugué.
  • librairie CSS pour faire un layout qui s'adapte en fonction de l'orientation portrait/paysage
  • les conseil d'Apple pour adapter son site à l'iPad. Ne pas compter sur les plugins (flash donc ...), :hover et mouseover inutiles, position:fixed différent. Rien de bien neuf donc, mais ça fait toujours du bien à lire.
  • appliquer des règles CSS pour l'iPhone et l'iPad, en fonction de l'orientation et de la taille de l'écran. On y apprend également comment désactiver le menu contextuel.
  • détecter l'iPad (PHP, JS)
  • détecter les dimensions et l'orientation avec les media queries
  • donner à certains éléments (comme des boutons ou des liens d'actions) toujours les mêmes dimensions, quel que soit le niveau de zoom
  • les limites du cache de Safari. Sur iPad on est 25ko max (dézipé) par composant. Pour iPhone 4, 100ko max par composant, 2Mo max par page.
  • librairie JS pour émuler l'overflow:scroll pour les safari iOS : par défaut safari n'affiche pas de scrolbar, le contenu qui déborde n'est donc pas accessible.