Früher, als ich auf der PC-Seite arbeitete, stieß ich auch auf Kompatibilitätsprobleme, aber um ehrlich zu sein, dachte ich nur an IE-Probleme, und es gab nichts, worauf ich besonders achten musste. Vielleicht lag es daran, dass ich war nicht gut im Zusammenfassen. Jetzt arbeite ich an der mobilen Seite (ursprünglich dachte ich, die mobile Seite sei sehr einfach, also habe ich es nicht ernst genommen), also habe ich mich geirrt, ich habe für meine Verachtung und Arroganz bezahlt!
Kürzlich bin ich auf einige Kompatibilitätsfehler gestoßen und habe Informationen im Internet gefunden.
Lassen Sie uns zunächst über das Ansichtsfenster sprechen
Zuerst die Vorlage
<meta charset=utf-8><!--Der Hauptzweck besteht darin, zu erzwingen, dass die Breite des Dokuments und die Gerätebreite bei 1:1 bleiben, mit einer maximalen Breite von 1,0, und die Bildschirmskalierung zu verhindern. --><meta content=width=device-width, initial-scale=1.0, Maximum-scale=1.0, user-scalable=no name=viewport><!--Dies ist auch eine iPhone-Eigenmarke, die den Vollbildmodus ermöglicht Stöbern. --><meta content=yes name=apple-mobile-web-app-capable><!--Die Eigenmarke des iPhone, der Stil der Statusleiste oben auf dem iPhone. --><meta content=black name=apple-mobile-web-app-status-bar-style><!--Automatische Erkennung von Nummern als Telefonnummern deaktivieren Dies ist nützlicher, da eine Reihe von Nummern angezeigt werden B. Blau, sind Stilzusätze zu anderen Farben ebenfalls wirkungslos. --><meta content=telephone=no name=format-detection><!--E-Mail-Erkennung deaktivieren--><meta content=email=no name=format-detection>
Fügen Sie beim Schreiben von Hintergrundbildern am besten oben links oder 0 0 hinzu, da es sonst beim Schreiben von Bewegungseffekten leicht zu Sprüngen kommt.
Das Kopieren und Auswählen von Text ist untersagt
.el { -webkit-user-select: none; -moz-user-select: none;}Es gibt einen Fehler in der festen Positionierung von Apple-Handys. Überprüfen Sie, ob overflow-x:hidden im HTML- und Body-Code festgelegt ist.
Legen Sie spezielle Stile für Mobiltelefone mit unterschiedlichen Bildschirmgrößen fest
@media nur Bildschirm und (min-device-width: 320px) und (max-device-width: 375px){}Die Unterstützung für die Eingabe-Tastaturereignisse „Taste nach oben“, „Taste nach unten“ und „Tastendruck“ in iOS ist nicht sehr gut. Es ist jedoch möglich, die Eingabe zur Überwachung des Tastatur-Tastenereignisses im mobilen Android-Browser zu verwenden, nachdem die Eingabemethode im iOS-Mobilgerät verwendet wurde Browser reagiert die Tastatur nicht sofort. Auf Ereignisse kann erst nach dem Löschen reagiert werden
Methode: Sie können das oninput-Ereignis von HTML5 verwenden, um keyup zu ersetzen
<input type=text id=testInput><script type=text/javascript> document.getElementById('input').addEventListener('input', function(e){ var value = e.target.value; });< /script>Das Festlegen des Eingabeschaltflächenstils unter iOS wird durch den Standardstil überschrieben
Die Lösung lautet wie folgt:
input,textarea { border: 0; -webkit-appearance: none;}Das Flex-Layout unterstützt das Attribut „flex-wrap:wrap“ für niedrigere Android-Versionen nicht, das iOS-System unterstützt jedoch das Zeilenumbruch-Attribut. Verzichten Sie natürlich auf Zeilenumbrüche und nutzen Sie stattdessen andere Methoden.
.box{ display: -webkit-box; /* Alte Versionssyntax: Safari, iOS, Android-Browser, ältere WebKit-Browser */ display: -moz-box; /* Alte Versionssyntax: Firefox (fehlerhaft) */ display: -ms-flexbox; /* Gemischte Versionssyntax: IE 10 */ Anzeige: -webkit-flex; /* Neue Versionssyntax: Chrome 21+ */ Anzeige: Flex /* Neue Versionssyntax: Opera 12.1, Firefox 22+ */}Das Platzhalterattribut der Eingabe positioniert den Text nach oben
Zeilenhöhe: (gleiche Höhe wie das Eingabefeld) ---PC-Lösung
Zeilenhöhe: normal ---Mobile Lösung
Nach der Eingabe Typ=Nummer erscheinen auf der PC-Seite Auf- und Abwärtspfeile
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button { -webkit-appearance: none !important;}Aktivieren Sie Android- und iOS-Mobiltelefone, um die Kamera zu öffnen und die Fotoalbumfunktion auszuwählen
<input class=js_upFile cover1 type=file name=cover Accept=image/* capture=camera multiple/>$(function () { //Rufen Sie den userAgent des Browsers ab und konvertieren Sie ihn in Kleinbuchstaben var ua = navigator.userAgent.toLowerCase( ) ; //Bestimmen Sie, ob es sich um ein Apple-Telefon handelt. Wenn ja, ist es wahr. var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1); if (isIos) { $(input:file).removeAttr(capture);Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.