Heim >Web-Frontend >H5-Tutorial >Häufig gestellte Fragen und Vorsichtsmaßnahmen zum H5-Projekt
Meta-Grundkenntnisse:
H5-Seitenfenster passt sich automatisch an die Gerätebreite an und verhindert, dass Benutzer die Seite skalieren
//1. HTML-Seitenstruktur
// width Legen Sie die Breite des Ansichtsfensters als positive Ganzzahl oder die Zeichenfolge „device-width“ fest
// height Legen Sie die Höhe des Ansichtsfensters fest Die Höhe wird automatisch analysiert. Es ist nicht erforderlich,
// initial-scale Standard-Zoomverhältnis festzulegen, bei dem es sich um eine Zahl handelt, die Dezimalzahlen enthalten kann.
// minimal-scale Benutzern erlauben ein minimales Zoomverhältnis, das eine Zahl ist, die Dezimalstellen enthalten kann
// Maximum-Scale Ermöglicht das maximale Zoomverhältnis des Benutzers, das eine Zahl ist, die Dezimalstellen enthalten kann
// vom Benutzer skalierbar Ob manuelle Skalierung zugelassen werden soll
/ /2. JS dynamische Beurteilung
var phoneWidth = parseInt(window.screen.width);
var phoneScale = phoneWidth/640;
var ua = navigator.userAgent;
if (/Android (d .d )/.test(ua)){
var version = parseFloat(RegExp.$1);
if(version>2.3 ){
document.write('');
}else{
document.write('');
}
} else {
document.write('');
}
Basis-Meta-Tag für leere Seite
Andere Meta-Tags
FAQ:
Mobile So definieren Sie die Schriftfamilie
@ -------------------- ---------------- --Der englische Name der chinesischen Schriftart
@ 宋体 SimSun
@ 黑体 SimHei
@微信亚黑 Microsoft Yahei
@ microsoft jhenghei
@ 新宋体 nsimsun
@ 新肖明体 mingliu
@ 肖明体 mingliu
@ Standardstil DFKai-SB
@ FangSong FangSong
@ 楷体 KaiTi
@ FangSong_GB2312 FangSong_GB2312
@ 楷体_GB2312 KaiTi_GB2312
@
@ Beschreibung: Die meisten chinesischen Schriftarten verwenden Songti und Yahei, und Englisch verwendet Helvetica
body { Schriftfamilie: Microsoft Yahei, SimSun, Helvetica; }
Per Telefon versenden So schreiben Sie E-Mails per SMS
// 1. Anrufen
// 2. Senden Sie Textnachrichten, das Winphone-System ist ungültig
Senden Sie Textnachrichten an: 10086
// 3. Schreiben Sie eine E-Mail
//Hinweis: Beim Hinzufügen dieser Funktionen beginnt die erste Funktion mit „?“ und die folgenden beginnen mit „&“
//1. Normale Post
Klicken Sie auf mich, um eine E-Mail zu senden
//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)
Klicken Sie auf „Senden Sie eine E-Mail“
//3 Schreiben Sie nach der CC-Adresse &bcc=, Sie können eine BCC-Adresse hinzufügen (es gibt Kompatibilitätsprobleme mit Android)
Klicken Sie, um eine E-Mail zu senden
/4. Verwenden Sie Semikolons (;), um die Adressen mehrerer E-Mail-Empfänger zu trennen
Klicken Sie auf mich, um eine E-Mail zu senden
//5. Geben Sie den Betreff ein, verwenden Sie ?subject=
Klicken Sie auf mich, um eine E-Mail zu senden
// 6. Um Inhalte einzuschließen, verwenden Sie ?body=; wenn der Inhalt Text enthält, verwenden Sie Wickeln Sie den Text ein
Klicken Sie auf mich, um eine E-Mail zu senden
//7 Der Inhalt enthält Links und Text, der http(s):// usw. enthält automatisch in Links umgewandelt
Klicken Sie auf mich, um eine E-Mail zu senden
//8 Der Inhalt enthält Bilder (wird vom PC nicht unterstützt)
Klicken Sie auf mich, um eine E-Mail zu senden
//9. Vollständiges Beispiel
Klicken Sie auf mich, um eine E-Mail zu senden
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:
.css{width:100px;height :100px;background-size:100px 100px;}
// 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
}
// kann auch
* { -webkit-tap-highlight-color: rgba(0,0,0, 0); }
//Unter Winphone
Verschönern Sie die Formularelemente
//1 das Standard-Erscheinungsbild des Webkit-Browsers
input,select { -webkit-appearance:none; subscription: none }
/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
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();
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
if(window.DeviceMotionEvent){
document.addEventListener('devicemotion', deviceMotionHandler, false)
}
var speed = 30;
var x = y = z = lastX = lastY = lastZ = 0;
function deviceMotionHandler(eventData){
var Beschleunigung = event.accelerationIncreasingGravity;
x = Beschleunigung.x;
y = Beschleunigung.y;
z = Beschleunigung.z;
if(Math.abs(x-lastX)>speed || Math.abs(y-lastY)>speed || Math.abs(z-lastZ)>speed ){
//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( ){
) WeixinJSBridge.invoke('setbackFontSizeCall', { 'fontSize':0}, function(res){
; 🎜> });
}sonst {
setTimeout(function(){
WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize':0}, function( res) {
Alert (json. stringify (res));
})
}, 0)
}//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
//Lösung:
var ua = navigator.userAgent.indexOf('Android');
if (ua >-1){
$('.ipt').on('focus', function(){
$('.css').css({'visibility ': 'hidden'})
}).on('blur', function(){
$('.css').css({'visibility':'visible' })
})
}
Video wird nicht im Vollbildmodus abgespielt
JS Gerät ermitteln
function deviceType(){
var ua = navigator.userAgent;
var agent = ["Android", "iPhone", "SymbianOS", "Windows Phone" , "iPad", " iPod"]; for(var i=0; i if(ua.indexOf(agent[ i])>0) { 🎜> JS bestimmt den WeChat-Browser function isWeixin() { var ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i)= ='micromessenger'){ return true ; }else{ return false; Android 2.3-Fehler //1.@-webkit-keyframes muss mit 0 % beginnen und mit 100 % enden, und das 0 %-Prozentzeichen kann nicht entfernt werden //2.nach und vor Pseudoklassen können keine Animationen verwendet werden //3.border-radius unterstützt die %-Einheit nicht. Wenn Sie kompatibel sein möchten, können Sie einen größeren Wert für den Radius festlegen //4.Die Schreibmethode von Übersetzungsprozentsatz und Skala zusammen führt zum Beispiel zu Fehlern: -webkit-transform: Translate(-50%,-50%) Scale(-0.5 , 1) / /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 -webkit-transform-style: Preserve-3d; -webkit-backface-visibility : versteckt; -webkit -Perspektive: 1000; } //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: //1. Reduzieren Sie domänenübergreifende Dateien
Android 4.x-Fehler
.css {
Hardwarebeschleunigung aktivieren