Dans le passé, lorsque je travaillais du côté PC, je rencontrais également des problèmes de compatibilité, mais pour être honnête, tout ce que j'avais en tête était les problèmes d'IE, et il n'y avait rien à quoi prêter une attention particulière. Je n'étais pas doué pour résumer. Maintenant, je travaille sur le côté mobile (au départ je pensais que le côté mobile était très simple, donc je ne le prenais pas au sérieux), donc j'avais tort, j'ai payé mon mépris et mon arrogance !
Récemment, j'ai rencontré quelques bugs de compatibilité et trouvé des informations sur Internet.
Parlons d'abord de la fenêtre d'affichage
Modèle d'abord
<meta charset=utf-8><!--L'objectif principal est de forcer la largeur du document et la largeur du périphérique à rester 1:1, avec une largeur maximale de 1,0, et d'interdire la mise à l'échelle de l'écran. --><meta content=width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no name=viewport><!--Il s'agit également d'une marque privée pour iPhone, permettant le plein écran navigation. --><meta content=yes name=apple-mobile-web-app-capable><!--La marque privée de l'iphone, le style de la barre d'état en haut de l'iphone. --><meta content=black name=apple-mobile-web-app-status-bar-style><!--Désactiver l'identification automatique des numéros en tant que numéros de téléphone Ceci est plus utile, car une chaîne de chiffres sera affichée. comme le bleu, les ajouts de style à d’autres couleurs sont également inefficaces. --><meta content=telephone=no name=format-detection><!--Désactiver la reconnaissance des e-mails--><meta content=email=no name=format-detection>
Lors de l'écriture d'images d'arrière-plan, il est préférable d'ajouter le coin supérieur gauche ou 0 0, sinon il est facile de sauter lors de l'écriture des effets de mouvement.
La copie et le texte sélectionné sont interdits
.el { -webkit-user-select : aucun ; -moz-user-select : aucun ; -khtml-user-select : aucun ;Il y a un bug dans le positionnement fixe des téléphones mobiles Apple. Vérifiez si le code HTML et le corps ont overflow-x:hidden ;
Définir des styles spéciaux pour les téléphones mobiles avec différentes tailles d'écran
Écran @media uniquement et (min-device-width : 320px) et (max-device-width : 375px){}La prise en charge des événements de saisie du clavier keyup, keydown et keypress dans IOS n'est pas très bonne. Il est possible d'utiliser la saisie pour surveiller l'événement keyup du clavier dans le navigateur mobile Android. Cependant, après avoir saisi à l'aide de la méthode de saisie dans le mobile iOS. navigateur, le keyup ne reçoit pas de réponse immédiate. Les événements ne peuvent recevoir une réponse qu'après suppression.
Méthode : vous pouvez utiliser l'événement oninput de html5 pour remplacer keyup
<input type=text id=testInput><script type=text/javascript> document.getElementById('input').addEventListener('input', function(e){ var value = e.target.value; });< /script>La définition du style du bouton de saisie sur iOS sera remplacée par le style par défaut
La solution est la suivante :
entrée, zone de texte { frontière : 0 ; -webkit-apparence : aucun ;}La mise en page Flex ne prend pas en charge l'attribut flex-wrap:wrap pour les versions inférieures d'Android, mais le système iOS prend en charge l'attribut line wrap. Comment résoudre ce problème ? Bien sûr, n’utilisez pas de sauts de ligne et utilisez plutôt d’autres méthodes.
.box{ display: -webkit-box; /* Syntaxe de l'ancienne version : Safari, iOS, navigateur Android, anciens navigateurs WebKit */ display : -moz-box; /* Syntaxe de l'ancienne version : Firefox (bogué) */ display : -ms-flexbox; /* Syntaxe de la version mixte : IE 10 */ affichage : -webkit-flex ; /* Syntaxe de la nouvelle version : Chrome 21+ */ affichage : flex /* Syntaxe de la nouvelle version : Opera ; 12.1, Firefox 22+ */}L'attribut placeholder de input positionnera le texte vers le haut
line-height : (même hauteur que la zone de saisie) ---Solution PC
hauteur de ligne : normale ---Solution mobile
Après avoir saisi le type = numéro, des flèches haut et bas apparaissent du côté du PC
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button { -webkit-apparence : aucun !important marge : 0 ;}Permettez aux téléphones mobiles Android et iOS d'ouvrir l'appareil photo et de sélectionner la fonction album photo
<input class=js_upFile cover1 type=file name=cover accept=image/* capture=camera multiple/>$(function () { //Récupérez l'userAgent du navigateur et convertissez-le en minuscules var ua = navigator.userAgent.toLowerCase( ) ; //Déterminez s'il s'agit d'un téléphone Apple, si c'est vrai var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1); if (isIos) { $(input:file).removeAttr(capture };})Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.