Trucs et astuces pour le développement sur iPad

Vous n’avez certainement pas du passer à côté, les devices mobiles sont en vogues. Et les tablettes graphiques en font partie.
Le développement de sites web adaptés à ces périphériques explose totalement. C’est une bonne chose, car avec des navigateurs assez récents: gloire aux CSS3, à l’HTML5 et aux nouveaux effets accessibles.

De plus c’est assez jouissif de pouvoir s’affranchir du développement sur des navigateurs vieillissants (pour ne pas les nommer) et qui bloquent totalement l’utilisation de ces technologies. Mais il faut savoir évoluer et délaisser les vieilles technologies, ce qui est souvent proscrit dans la plupart des entreprises.

Cependant tout n’est pas rose non plus dans ce merveilleux monde Web 2.0 mobile et d’autant plus sur la tablette d’Apple.

En effet celle-ci possède pas mal de restrictions au niveau du navigateur, voulues ou non. Certains bugs sont persistants et empêchent de faire ce que l’on veut sur ces bécanes.

J’ai pu trouver au fil de mes développements des astuces pour faire fonctionner certaines choses. Et comme c’est toujours utile de partager ses connaissances, les voici en vrac!

Anticrénelage

Lorsque vous appliquez une rotation à une image en CSS avec l’attribut rotate, un crénelage se fait sur l’iPad alors qu’il n’est pas présent sur webkit Desktop.
Pour y remédier, il suffit d’appliquer une translation de 0 dans la même classe. Par exemple:
.maClasse {
-webkit-transform: rotate(-5deg) translate(0);
-moz-transform: rotate(-5deg) translate(0);
-o-transform: rotate(-5deg) translate(0);
}

 

Slide avec deux doigts et problème d’affichage des overflow:hidden

De même, lorsque vous voulez utiliser une <div> avec un overflow:hidden pour permettre le scroll de cet élément. L’iPad n’affiche pas la scrollbar par défaut, ce qui n’est pas forcement un mal, au niveau design elle n’apparait que lorsque vous slidez. Pour que ça fonctionne sur iPad, il faut utiliser deux doigts. Ce n’est vraiment pas user friendly et limite à proscrire. On peut y remédier en ajoutant la propriété suivante en css:

-webkit-overflow-scrolling: touch;

Un autre problème apparait assez vite, selon ce que vous mettez dans le contenu du scroll, comme par exemple certains effet de transparences en CSS par exemple. Webkit pour iPad est totalement buggé (en tout cas à l’heure où j’écris ces lignes) et vous affichera la partie du scroll seulement visible à la base. Dès que vous allez scroller, la partie cachée n’est jamais affichée.
En gros le navigateur ne recalcule pas l’affichage en temps réel lorsqu’il y a des effets.

Là encore il y a une parade, et contrairement aux autres, je ne l’ai vu documenté nulle par sur le net.

Il suffit d’ajouter un événement sur la <div> en overflow sur le « move ».

Par exemple avec JQuery on aura
$(‘madiv’).on(‘move’, forceDisplay);

Donc à chaque mouvement effectué par l’utilisateur sur cette div, la fonction forceDisplay sera lancée.

Dans cette fonction on va appliquer une classe spécifique:

function forceDisplay() {
$(‘.madiv’).addClass(« forced-display »);
}

Enfin il faut définir la classe forced-display en css :
.forced-display {
-webkit-transform: rotate(0) translate(0);
-moz-transform: rotate(0) translate(0);
-o-transform: rotate(0) translate(0);
}

L’astuce ici est de forcer à chaque mouvement, une transformation. Ce comportement va pousser le navigateur a réafficher cette zone en permanence dès qu’il y aura un événement move fait par l’utilisateur. Ce n’est pas optimal et j’imagine qu’il y a certainement un moyen de l’améliorer grandement. Cependant ça suffit à mon usage et ça fonctionne sur toutes les versions de l’iPad, même la première qui est un peu lente et peu fournie en mémoire.

En attendant qu’Apple corrige ce gros problème, cela vous permettra d’utiliser ce que vous voulez sur iPad. A noter que sur le webkit d’Android il n’y a aucun problème d’affichage de ce type.

 

Le lecteur vidéo et audio HTML5

Concernant le lecteur HTML5, Apple l’a fortement limité, à tord ou a raison pour éviter certains abus. Le player par défaut est QuickTime, il faut savoir qu’il prends tout les événements lorsque l’on passe le doit dessus. Si vous voulez pouvoir « swiper » à l’aide d’une librairie JS pour faire un effet de slide par exemple, vous avez trois possibilités:

– Enlever l’attribut « controls » de votre balise vidéo ou audio
– Réécrire les controles vous même en JS
– Utiliser un player alternatif HTML5 comme par exemple videojs

 

Deux autres contraintes peuvent être vraiment génantes égualement, le préchargement (preload) des vidéos n’est pas possible ainsi que la lecture automatique (autoplay). Plusieurs techniques sont apparues mais au fur et a mesure des versions d’iOS, Apple les as désactivés une par une. Pour faire simple, il faut au moins une interaction avec l’utilisateur pour pouvoir lancer automatiquement une vidéo ou un son dans le lecteur. Une solution est par exemple de mettre un Pop In, par exemple d’explication, pour que l’utilisateur clique dessus, à ce moment là on peut instancier le lecteur. Une fois cette restriction passée, on peut réutiliser ce lecteur ou un autre sans restriction.

La lecture de média est d’ailleurs limité à un lecteur à la fois, donc impossible d’avoir par exemple une musique et une vidéo qui se lance, pour la musique c’est pas forcement un mal, ça évitera d’avoir des sites web avec musique d’assensceur en arrière plan qu’on ne peut pas arrêter… Pour cette restriction, c’est beaucoup plus compréhensible par rapport aux limites du matériels. C’est à peut près la seule que je vois de valable personnellement.

 

Si vous avez des trucs et astuces pour le développement sur mobile, n’hésitez pas à les partager!

One Response to “Trucs et astuces pour le développement sur iPad

  • Merci pour cette astuce. Elles vont beaucoup m’aider dans le développement des mes sites immobiliers pour leur compatibilité avec iphone et ipad. Je n’hésiterais pas à les utiliser.
    Cordialement

Commentaires