1. Délai de 300ms sur les événements tactiles =============================================

• FastClick permet d'éliminer le délai de 300ms sur les appareils mobiles
• Le module touch de Zepto avec l'événement tap résout également ce problème de délai
• L'ordre de réponse aux événements tactiles est : touchstart → touchmove → touchend → click. On peut aussi écouter ontouchstart pour accélérer la réponse
• Si la compatibilité mobile est correcte (IE/Firefox/Safari iOS 9.3+), il suffit d'ajouter cette balise méta : ```

2. Compatibilité des styles CSS mobile ======================================

• Configurer la balise meta viewport pour ignorer la résolution réelle de l'appareil et définir une résolution uniforme. Désactiver le zoom utilisateur : ```

• Utiliser rem pour l'aadptation d'écran. Définir la taille de police de l'élément racine, puis utiliser l'unité rem pour toutes les dimensions en pixels. Utiliser les media queries pour ajuster la taille de police selon les appareils

3. Empêcher le redimensionnement automatique des polices ========================================================

Lors du développement mobile avec les modes portrait/paysage, les polices peuvent changer et perturber la mise en page. Pour éviter cela :

* {
  -webkit-text-size-adjust: none;
}

4. Supprimer l'effet de surbrillance sur les taps =================================================

* {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

Note : cette méthode fonctionne pour la couleur de fond, mais le cadre de surbrillance reste visible sur Android.

La propriété CSS3 pointer-events: none; désactive tous les événements sur un élément. Supporté depuis IE11 et dans tous les navigateurs modernes.

5. Désactiver la majuscule automatique sur iOS ==============================================

<input type="text" autocapitalize="none">

6. Empêcher iOS de détecter les numéros comme téléphone =======================================================

<meta name="format-detection" content="telephone=no" />

7. Désactiver les fenêtres contextuelles iOS ============================================

-webkit-touch-callout: none;

8. Empêcher la sélection de texte sur iOS et Android ====================================================

-webkit-user-select: none;

9. Compatibilité de calc() ==========================

La fonction calc() nécessite le préfixe -webkit- sur iOS 6. Firefox supporte déjà calc sans préfixe. Android ne supporte pas calc actuellement :

div {
  width: 95%;
  width: -webkit-calc(100% - 50px);
  width: calc(100% - 50px);
}

10. Problèmes de positionnement fixed =====================================

Sur iOS, les éléments fixed peuvent avoir des problèmes de positionnement lorsque le clavier virtuel s'affiche. Android gère mieux cette situation. iOS 4 ne supporte pas position:fixed.

Solution : utiliser le plugin iScroll.

11. Événements click non déclenchés sur certains éléments =========================================================

Sur iOS, les éléments non cliquabels comme <label> ou <span> ne déclenchent pas l'événement click. Solution :

cursor: pointer;

12. Éliminer le scintillement des transitions =============================================

-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;

13. Animations CSS saccadées ============================

Solutions :

1. Utiliser les propriétés de transformation transform et opacity plutôt que left et top
2. Activer l'accélération matérielle : ``` -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);

3. Espaces indésirables avec le clavier iOS ============================================

Lors de la saisie en chinois avec le clavier natif iOS, des espaces peuvent apparaître entre les lettres. Solution par expression régulière :

this.value = this.value.replace(/\u2006/g, '');

15. Position du placeholder décalée ===================================

Sur mobile, le placeholder peut être décalé vers le haut. Solution CSS :

line-height: normal;

16. Hauteur du parent non préservée avec les flottants ======================================================

Solutions :

/* Option 1 */
parent-element {
  overflow: hidden;
}

/* Option 2 */
parent-element {
  display: inline-block;
}

Ces méthodes transforment le parent en élément BFC pour que les enfants déterminent la hauteur. Privilégier l'option 1 car inline-block peut ajouter des dimensions involontaires.

17. Problème de cache aller-retour ==================================

Le bouton retour du navigateur peut ne pas exécuter JavaScript, particulièrement sur Mobile Safari (problème lié au bfcache). Solution :

window.onunload = function () {};

18. overflow-x: auto sur iOS ============================

-webkit-overflow-scrolling: touch;

Partie 2 : Pièges et bonnes pratiques Vue.js mobile

1. Problèmes avec le clavier natif iOS

---

Avec le cllavier natif iOS en saisie chinoise, l'événement keyup ne se déclenche pas, et keyup.enter ne fonctionne ni en chinois ni en anglais.

Solutions :

• Utiliser l'événement input à la place
• Utiliser un watcher sur la valeur du champ
• Installer un clavier tiers (peu pratique)

2. Problème de perte de focus sur les éléments input

---

Cas d'usage : implémentation d'un composant de recherche.

<template>
  <div class="search-container" :style="styles" :clear="clear">
    <form action="#" onsubmit="return false;">
      <input type="search"
        class="search-input"
        ref="searchField"
        v-model='searchModel'
        :placeholder="placeholderText"
        @input="handleInput"
        @keyup.enter="handleEnter"
        @focus="handleFocus"
        @blur="handleBlur"
      />
      <search-icon class="search-icon" size="14"></search-icon>
    </form>
    <div v-if="showClose" @click="handleClose">
      <close-icon class="close-icon" size='12'></close-icon>
    </div>
  </div>
</template>

Pour lose le focus après la validation par Entrée :

handleEnter (e) {
  document.getElementsByClassName('search-input')[0].blur();
  // logique personnalisée
}

Note importante : sur mobile, l'élément input type="search" doit être Wrappé dans une balise form pour que la touche Entrée du clavier affiche un bouton de recherche au lieu d'un simple retour à la ligne.