//2 Fügen Sie den Anfang von ?cc= nach der Empfangsadresse hinzu, Sie können eine Kopieadresse hinzufügen (es gibt Kompatibilitätsprobleme mit Android)
Mobiles Touch-Ereignis (unterscheidet zwischen Webkit und Winphone)
/* Ein Touch-Ereignis, das ausgelöst wird, wenn der Benutzer seinen Finger auf das mobile Gerät legt und ihn über den Bildschirm bewegt*/
// Das Folgende unterstützt das Webkit
Touchstart – wenn der Finger den Bildschirm berührt, passiert die Zeit. Egal wie viele Finger sich gerade befinden
Touchmove – wird kontinuierlich ausgelöst, wenn Finger über den Bildschirm gleiten. Normalerweise rufen wir beim Verschieben der Seite die Funktion „preventDefault()“ des Ereignisses auf, um zu verhindern, dass die Standardsituation eintritt: Scrollen der Seite verhindern
touchend – wird ausgelöst, wenn der Finger den Bildschirm verlässt
touchcancel – Das System stoppt. Es wird ausgelöst, wenn die Berührung verfolgt wird. Wenn die Seite beispielsweise während des Berührungsvorgangs plötzlich ein Eingabeaufforderungsfeld anzeigt, wird das Ereignis ausgelöst. Dieses Ereignis wird relativ selten verwendet
//TouchEvent-Beschreibung:
Touches: Informationen zu allen Fingern auf dem Bildschirm
targetTouches: Fingerinformationen zum Finger im Zielbereich
changedTouches: Fingerinformationen, die das Ereignis zuletzt ausgelöst haben
Wenn touchend, touches und targetTouches Die zuletzt von changesTouches gespeicherten Informationen werden am besten zur Berechnung der Fingerinformationen verwendet
//Parameterinformationen (changedTouches[0])
Client > ontouchend > onclick
// Das Folgende unterstützt Winphone 8
MSPointerDown – tritt auf, wenn ein Finger den Bildschirm berührt. Egal wie viele Finger es aktuell gibt
MSPointerMove – wird kontinuierlich ausgelöst, wenn Finger über den Bildschirm gleiten. Normalerweise rufen wir beim Verschieben der Seite das CSS html{-ms-touch-action: none;} auf, um zu verhindern, dass die Standardsituation eintritt: Scrollen der Seite verhindern
MSPointerUp – wird ausgelöst, wenn der Finger weggeht der Bildschirm
Der mobile Klickbildschirm erzeugt eine verzögerte Reaktion von 200-300 msErklärung: Die Webseite auf dem mobilen Gerät hat eine Verzögerung von 300 ms Klicken Sie auf die Schaltfläche, um verzögert zu werden, oder sogar, wenn der Klick fehlschlägt. Das Folgende ist der historische Grund, der von einem Kollegen in einem Unternehmen mitgeteilt wurde:
Im Jahr 2007 veröffentlichte Apple Safari, das erste IOS-System auf dem iPhone Um es auf den PC anzuwenden, können Webseiten auf einem großen Bildschirm mithilfe der Doppeltipp-Zoom-Lösung besser auf einem Mobiltelefon angezeigt werden. Wenn Sie beispielsweise einen Browser auf einem Mobiltelefon verwenden, um eine Webseite auf einem PC zu öffnen, können Sie dies möglicherweise tun Sehen Sie sich die Seite an. Obwohl der Inhalt den gesamten Bildschirm ausfüllen kann, sind die Schriftarten und Bilder zu klein, um klar gesehen zu werden. Zu diesem Zeitpunkt können Sie schnell auf einen bestimmten Teil des Bildschirms doppelklicken, um den vergrößerten Inhalt dieses Teils deutlich zu sehen. Doppelklicken Sie erneut, um zum ursprünglichen Zustand zurückzukehren.
Zum Zoomen doppelklicken bedeutet, schnell zweimal mit dem Finger auf den Bildschirm zu klicken. Der mit iOS gelieferte Safari-Browser zoomt die Webseite auf die ursprüngliche Proportion.
Der Grund liegt darin, wie der Browser schnelle Klicks beurteilen muss, z. B. auf einen Sprunglink , der Browser erfasst zunächst den Klick Sie können nicht entscheiden, ob der Benutzer einfach auf den Link klickt oder auf den Bereich doppelklickt, um einen Zoomvorgang durchzuführen. Daher hält der Browser ihn nach der Erfassung des ersten Klicks für einen Zeitraum t an Vorgang innerhalb des Zeitintervalls t. Wenn Sie das nächste Mal klicken, klickt der Browser auf den Sprunglink. Wenn der Benutzer innerhalb des Zeitintervalls t zum zweiten Mal klickt, verhindert der Browser den Sprung und führt stattdessen den Zoomvorgang für diesen Teil aus Seite. . Wie lang ist dieses Zeitintervall t? Unter iOS Safari sind es etwa 300 Millisekunden. Daher kommt die Verzögerung. Die Konsequenz ist, dass die Seite eine Weile braucht, um zu reagieren, wenn der Benutzer einfach auf die Seite klickt, was zu einer langsamen Erfahrung für den Benutzer führt. Für Webentwickler dauert die Verarbeitung des von den Seiten-JS erfassten Klickereignisses 300 ms wirksam werden, was indirekt ist Beeinflusst die Verarbeitung anderer Geschäftslogiken.
//Lösung:
Fastclick kann die 300-ms-Verzögerung von Klickereignissen auf Mobiltelefonen lösen.
Zeptos Touch-Modul, Tap-Ereignis ist ebenfalls zu lösen Verzögerungsproblem beim Klicken
Rentina-Anzeigeprinzip und Designplan
Erklärung: Der Retina-Bildschirm ist ein LCD-Bildschirm mit ultrahoher Pixeldichte, der auf dem Bildschirm derselben Größe angezeigt wird Die Anzahl der Pixel ändert sich beispielsweise von eins auf ein Vielfaches, auf einem Bildschirm mit der gleichen Bandbreite, auf dem Retina-Display eines Apple-Geräts, wird aus einem Pixel vier.
Die Bitmap auf einem hochauflösenden Display wird vergrößert und das Bild wird unscharf, daher ist das mobile Modell normalerweise doppelt so groß wie das eines herkömmlichen PCs.
Dann lautet die Front-End-Lösung: Stellen Sie sicher, dass die Länge und Breite des aus dem Designentwurf ausgeschnittenen Bildes gerade Zahlen sind, und verwenden Sie backgroud-size, um das Bild auf die Hälfte des Originals zu verkleinern Größe
//Wenn beispielsweise die Bildbreite und -höhe 200px*200px beträgt, lautet die Schrift wie folgt:
// Der Wert anderer Elemente beträgt die Hälfte des Originalwerts. Wenn die Schriftart des visuellen Entwurfs beispielsweise 40 Pixel beträgt, ist der verwendete Stil 20px
.css{font-size:20px}
//image-set design Rentina-Hintergrundbild
image-set, privates Webkit-Attribut , ist auch ein CSS4-Attribut, das entwickelt wurde, um das Bild unter dem Rentina-Bildschirm zu lösen.
.css {
Hintergrund: url(images/bg.jpg) no-repeat center;
Hintergrund: -webkit-image-set(
url(images/bg.jpg) 1x, //Unterstützt den normalen Bildschirm des Bildsatzes
url(images/bg-2x.jpg) 2x); //Unterstützt den Bildsatz Rentinan
}
So entfernen Sie den Hintergrund oder Rand, der durch Klicken auf ein Element erzeugt wird
/ Wenn ein iOS-Benutzer auf einen Link klickt, wird auf Wunsch eine durchscheinende graue Maske angezeigt Deaktivieren Sie es, Sie können es festlegen – Der Alpha-Wert von webkit-tap-highlight-color ist 0, um die graue durchscheinende Maske zu entfernen.
//Wenn ein Android-Benutzer auf einen Link, einen Rahmen oder eine durchscheinende graue Maske klickt wird angezeigt, was von verschiedenen Herstellern definiert wird. Sie können den Alpha-Wert von -webkit-tap-highlight-color auf 0 setzen, um die bei einigen Maschinen auftretenden Effekte zu entfernen. Im Winphone-System kann der graue, durchscheinende Hintergrund, der durch Klicken auf das Etikett erzeugt wird, durch
Entfernen eingestellt werden; Es gibt eine andere Möglichkeit für die Button-Klasse, anstatt a oder input-Tags zu verwenden: rgba( 0,0,0,0);
-webkit-user-modify:read-write-plaintext-only; //-webkit-user-modify hat einen Nebeneffekt, nämlich die Eingabe Methode kann nicht mehr mehrere Zeichen eingeben
/2 Elemente, um das Standard-Erscheinungsbild von Formularelementen zu ändern
///1 Deaktivieren Sie den Auswahlpfeil, ::-ms-expand ändern Sie den Dropdown-Pfeil des Formularsteuerelements, stellen Sie ihn so ein, dass er das Hintergrundbild ausblendet und verwendet um es zu ändern
select::-ms-expand { display:none; }
//2 Deaktivieren Sie die Standardstile für Radio und Kontrollkästchen::-ms -check, um das Formular-Kontrollkästchen oder das Standardsymbol des Optionsfelds zu ändern, es auszublenden und ein Hintergrundbild zu verwenden, um es zu ändern
input[type=radio]::-ms-check,
input[type=checkbox]::-ms-check { display:none;
///3 Deaktivieren Sie die standardmäßige Löschschaltfläche des Formulareingabefelds auf der PC-Seite , ändern Sie die Schaltfläche zum Löschen mit ::-ms-clear, stellen Sie sie auf Ausblenden ein und verwenden Sie das Hintergrundbild zum Dekorieren von
input[type=text]: :-ms-clear,
input [type=tel]::-ms-clear,
input[type=number]::-ms-clear { display:none 🎜>
Wählen Sie px oder rem für mobile Font Unit Schriftgröße
// Wenn Sie sich an eine Vielzahl mobiler Geräte anpassen möchten, empfiehlt sich die Verwendung von rem. Das Folgende sind Referenzwerte:
html { Schriftgröße: 62,5 % } //10*16 = 62,5 %
//Set 12px-Schriftart Beachten Sie hier, dass der entsprechende px-Wert vor rem hinzugefügt werden sollte, um das Kompatibilitätsproblem von Browsern zu lösen, die rem nicht unterstützen, und ein ordnungsgemäßes Downgrade zu erreichen
body { font-size:12px; Schriftgröße: 1,2 Rem; Parameter
::-webkit-scrollba //Der gesamte Teil der Bildlaufleiste
::-webkit-scrollbar-thumb //Das kleine Quadrat innerhalb der Bildlaufleiste::- webkit-scrollbar-track //Scrollbar-Track::-webkit-scrollbar-button //Schaltflächen an beiden Enden des Scrollbar-Tracks::-webkit- scrollbar-track-piece // Der mittlere Teil der Bildlaufleiste, integrierte Spur ::-webkit-scrollbar-corner // Ecke, der Schnittpunkt zweier Bildlaufleisten : :-webkit-resizer // Zwei Bildlaufleisten Kleine Steuerelemente zum Ändern der Größe von Elementen durch Ziehen am Schnittpunkt // Langes Drücken auf Links und Bild-Popup-Menüs deaktivieren a,img { -webkit- touch-callout: none } // IOS- und Android-Benutzern die Auswahl von Text verbieten html,body {-webkit-user -select:none; user-select: none; /* WebKit-Browser */color: #999; }:-moz-placeholder { /* Mozilla Firefox 4 bis 18 */color: #999; }::-moz -placeholder { /* Mozilla Firefox 19 */color: #999; }:-ms-input-placeholder { /* Internet Explorer 10 */color : #999; }input:focus::-webkit-input-placeholder{ color:#999; }// Entfernen Sie die Spracheingabetaste auf Androidinput::-webkit-input-speech-button {display: none} // Verhindern Sie die Standardeinstellung Touch-Ereignis von Windows Phone/* Hinweis: Die Verwendung von e.preventDefault für das Standard-Touch-Ereignis auf Winphone ist ungültig und kann durch Stile deaktiviert werden, wie zum Beispiel: */html { -ms -touch-action:none; } //Deaktivieren Sie das Standard-Touch-On-Winphone-Ereignis Eingabe unter iOS abbrechen, die Standard-Großschreibung englischer Initialen beim Tippen
Fotos aufnehmen und Bilder mit dem Mobiltelefon hochladen
//IOS verfügt über die Funktionen zum Aufnehmen von Bildern und Videos sowie zum Auswählen lokaler Bilder, während einige Android-Geräte nur über die Funktion zum Auswählen lokaler Bilder verfügen . Winphone unterstützt keine
Bildschirmrotationsereignisse und -stile
//JS-Verarbeitung
function orientInit(){
var orientChk = document.documentElement.clientWidth > document.documentElement.clientHeight?'landscape':'portrait';
if(orientChk =='lapdscape' ; > }
}
orientInit();
window.addEventListener('onorientationchange' in window?'orientationchange':'resize', function (){ setTimeout(orientInit, 100);},false) //CSS-Verarbeitung/ / Stil für vertikalen Bildschirm@media alle und (Ausrichtung:Hochformat){ }//Stil für horizontalen Bildschirm@media alle und (Ausrichtung:Querformat){ }
Audioelemente und Videoelemente können in iOS und Android nicht automatisch abgespielt werden
//Audio, Schreibmethode 1
Ihr Browser unterstützt nicht es noch Oh
//Audio, Schreibmethode 2
Die Wiedergabe von Musik bg.ogg hat Priorität und die Wiedergabe von bg.mp3 wird nicht unterstützt
//JS-Bindung Auf automatische Wiedergabe einstellen (Musik abspielen, wenn das Fenster bedient wird) $(window).one('touchstart', function(){ music.play( );
//Kompatible Verarbeitung unter WeChat
document.addEventListener("WeixinJSBridgeReady", function () { music.play();
}, false);
//Zusammenfassung//1 Element kann auf der PC-Seite nicht verwendet werden//2 Wenn das Audioelement keine Steuerelemente festlegt, belegt es den Platz auf der PC-Seite, aber auf Chrome keinen Platz einnehmen
Schwerkrafterfassungsereignis
// Verwenden Sie HTML5 deviceMotion, um das Schwerkrafterfassungsereignis aufzurufen
//Hier ist Nach dem Schütteln auszuführende Methode = z;
}
function yaoAfter(){
//etwas tun
}
//Erklärung: Lassen Sie uns über den Fall sprechen und den Effekt in yao.js abschütteln
Die Seite wird träge, nachdem der WeChat-Browserbenutzer die Schriftart angepasst hat So verhindern Sie, dass der Benutzer die Größe anpasst //Der folgende Code kann verhindern, dass die Android-Seite durch die Skalierung der Schriftart des Benutzers gezwungen wird, die Größe zu ändern. Es kommt jedoch zu einer Verzögerung von etwa 1 Sekunde, während der das Laden erfolgen kann berücksichtigt werden if (typeof(WeixinJSBridge) == " undefiniert") { document.addEventListener("WeixinJSBridgeReady", function (e) { setTimeout(function( ){
//Unter IOS können Sie -webkit verwenden -text-size-adjust, um zu verhindern, dass Benutzer die Schriftgröße anpassenbody { -webkit-text-size-adjust:100%!important🎜 >
/ /Die beste Lösung: Verwenden Sie am besten ein rem- oder prozentuales Layout
Positionierungsfallen//feste Positionierung
//1 Feste Elemente unter iOS Anfällig für Positionierungsfehler. Wenn die Soft-Tastatur angezeigt wird, wirkt sich dies auf die Positionierung fester Elemente aus. /2 Hat keinen Einfluss auf die Positionierung fester Elemente. //3.position:fixed//Lösung: Verwenden Sie [Iscroll](http://cubiq.org /iscroll-5) wird unter ios4 nicht unterstützt, wie zum Beispiel:
//Positionspositionierung
//unter Android Wenn die Softtastatur angezeigt wird, wirkt sich dies auf die absolute Elementpositionierung aus
/ /1 Der integrierte Browser des Samsung Galaxy S4 unterstützt die Abkürzung „border-radius“ nicht.
//2. Wenn Sie den Randradius und die Hintergrundfarbe gleichzeitig festlegen, läuft die Hintergrundfarbe über die abgerundeten Ecken hinaus
///3 unterstützt das Ereignis „mouse:visited“, was bedeutet, dass der Text lila wird, nachdem der Link besucht wurde
//4. Android kann nicht mehrere Audios gleichzeitig abspielen
Übergangsspritzer beseitigen screen
.css {
-webkit-transform-style: Preserve-3d;
-webkit-backface-visibility : versteckt;
-webkit -Perspektive: 1000;
}
Hardwarebeschleunigung aktivieren
//Derzeit werden Chrome/Filefox/Safari/IE9 und die neueste Version von Opera alle unterstützt Hardwarebeschleunigung Wenn erkannt wird, dass bestimmte CSS-Regeln auf ein DOM-Element angewendet werden, wird diese automatisch aktiviert, wodurch das Problem des Seitenflashens gelöst und eine reibungslose Animation gewährleistet wird.
.css {
-webkit-transform: Translate3d(0,0,0);
-moz-transform: Translate3d(0,0,0);
-ms-transform: Translate3d(0,0,0);
Transformation: Translate3d(0,0,0);
}
Rendering-Optimierung
//1. Verbieten Sie die Verwendung von Iframe (Blockieren des Onload-Ereignisses des übergeordneten Dokuments)
//2. Verbieten Sie die Verwendung von GIF-Bildern, um Ladeeffekte zu erzielen (reduzieren Sie die CPU). Verbrauch und Verbesserung der Rendering-Leistung)
//Verwenden Sie CSS3-Code anstelle von JS-Animation.
//GPU-Beschleunigung aktivieren für kleine Bilder, nicht für große Bilder) Empfohlen)
// Für einige kleine Symbole kann Base64-Bit-Kodierung verwendet werden, um Netzwerkanforderungen zu reduzieren. Es wird jedoch nicht empfohlen, große Bilder zu verwenden, da diese mehr CPU verbrauchen. Die Vorteile kleiner Symbole sind:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
