Liste des différences connues entre "Safari sur iPad" et "Desktop Safari"

Question

Récemment, le test d'une application web sur Windows/Mac navigateurs de bureau - puis sur un iPad, j'ai remarqué plusieurs différences dans Safari que je ne l'attendais pas. même si le numéro de version est le même.

J'aimerais composer une liste de ces différences (pour moi et pour les autres) d'avoir comme une référence du développeur.

par exemple, dans Safari sur l'iPad

• Safari iPad prend le contrôle total de la liste Select/option style
• iPad ouvre le clavier à l'écran quand un élément reçoit le focus, donc inline flottant calendrier des widgets (et similaires) ne peuvent pas fonctionner comme prévu (ou avoir besoin d'être modifié)
• Safari iPad ne prend pas en charge position:fixed comme bureau Safari < iOS 5
• Safari iPad (similaire à l'iPhone/ipod touch Safari) automatiquement des liens hypertexte 10 chiffres du numéro d'offre n ° de téléphone/options de contact
• Safari iPad prompt('long message...','default'); montre seulement 1 ligne du message (bien qu'il ne fournissent le défilement du message

J'ai entendu d'autres que certains JavaScript ne fonctionne pas, etc. etc. mais j'ai pas encore tester donc je serais reconnaissant pour toutes les découvertes que vous avez rencontrés.

Answer 1

Quelques autres pour vous:

1. Pas de flash
2. Support médiocre d'iFrame (donc Facebook comme etc. nécessite une implémentation personnalisée pour iPad)
3. Limitations étranges de la mise en cache
4. HTML textAreas ne comporte pas de barre de défilement (vous devez effectuer un double balayage du doigt - ce qui est bien sûr incroyablement intuitif)

En général. Traitez-le comme un iPhone agrandi, pas un bureau réduit.

Answer 2

J'ai pensé que cela pourrait être utile: Guide Apple pour la préparation de contenu Web pour iPad

Vient d'être attrapé par la position: problème résolu mon auto

Answer 3

Safari sur l'iPad a le même problème avec le bouton de largeur/rembourrage comme sur l'iPhone

http://stackoverflow.com/questions/3430506/iphone-button-padding-unchangeable décrit ce problème et une solution pour enlever le rembourrage sur un bouton avec le texte, mais ce n'est pas vous aider si vous voulez un bouton pour être plus étroit que le rembourrage de lui-même (par exemple, pour un bouton qui a une petite icône sur elle). Pour ce faire, j'ai eu à encadrer le bouton avec un élément externe avec une largeur définie et overflow: hidden, comme ceci:

<span style="border: solid 1px blue; display: block; width: 16px; overflow: hidden">
    <button style="-webkit-appearance: none; border-width: 0">&nbsp;</button>
</span>

(le bleu de la frontière est de montrer où se trouve le bouton, il n'est pas critique pour le hack)

Answer 4

La fonction offset () de jQuery ne fonctionne pas: http://bugs.jquery.com/ticket/6446

Answer 5

Il semble également que l'iPad Safari rencontre des problèmes avec les éléments avec overflow:auto; qui doivent donc afficher des barres de défilement ( page de test avec div et iframe ).