1. Wenn Sie sich das Hintergrundbild mit einem Android -Browser ansehen, sind einige Geräte verschwommen.
Auf einem PC ist es sehr klar mit dem gleichen Anteil an Bildern, aber es ist sehr verschwommen am Telefon. Was ist der Grund?
Nach der Forschung war es das Gerätepixelratio, das das Problem verursachte. Da die Auflösung des Mobiltelefons zu klein ist, sind die Wörter sehr klein, wenn die Webseite gemäß der Auflösung angezeigt wird. So zeigte Apple zunächst die Auflösung des 960640 des iPhone 4 auf der Webseite, so dass DevicePixelRatio = 2. Jetzt ist Android ziemlich unordentlich, mit 1,5, 2 und 3.
Wenn Sie möchten, dass das Bild deutlicher auf Ihrem Telefon angezeigt wird, müssen Sie anstelle des IMG -Tags (im Allgemeinen 2 -mal) ein 2 -facher Hintergrundbild verwenden. Beispielsweise betragen die Breite und Höhe eines DIV 100100, das Hintergrundbild muss 200200 und dann Hintergrundgröße sein: Enthält, damit das angezeigte Bild klarer ist.
Der Code kann wie folgt sein:
Hintergrund: URL (../ Images/icon/All.png) No-Repeat Center; Breite: 100%; Höhe: 50px;
Oder Hintergrundgröße angeben: enthalten; Probieren Sie es bitte aus!
2. Bildbeladung
Wenn Sie auf das Problem der langsamen Bildbelastung stoßen, verwendet die Entwicklung von Mobiltelefonen in diesem Fall die Canvas -Methode im Allgemeinen zum Laden:
Informationen zu der spezifischen Canvas -API finden Sie unter: http://javascript.ruanyifeng.com/htmlapi/canvas.html
Hier ist ein Beispiel für eine Leinwand:
<li> <Canvas> </canvas> </li>
JS laden Bilder und li. Insgesamt werden 17 Bilder gegeben!
var total = 17; var zwin = $ (Fenster); var render = function () {var padding = 2; var winwidth = zwin.width (); var picwidth = math.floor ((Winwidth-padding*3)/4); var tmpl = ''; für (var i = 1; i <= totla; i ++) {var p = padding; var imgsrc = 'img/'+i+'. jpg'; if (i%4 == 1) {p = 0; } tmpl+= '<li> <canvas id = "cvs _'+i+'"> </canvas> </li>'; var imageObj = new Image (); ImageObj.Index = i; ImageObj.onload = function () {var cvs = $ ('#cvs _'+this.index) [0] .GetContext ('2d'); cvs.width = this.width; cvs.height = this.height; cvs.drawimage (this, 0,0); } imageObj.src = imgsrc; }} render ();3. Wenn die mobile Website nicht mit dem IE -Browser kompatibel sein muss, verwenden wir im Allgemeinen Zeptojs . Zeptojs integrierte Touch-Ereignis-Methode. Weitere Informationen finden Sie unter http://zeptojs.com/#touch Events
Ich habe mir die neue Version von Zeptio API angesehen, die IE10 oder über Browsern bereits unterstützt, und Sie können sich für Zeptojs entscheiden!
V. Dies ist der grundlegendste Punkt. Was Entwickler von Mobilfunkwebellen am meisten wissen sollten, ist das Einrichten von Ansichtsfenster in Meta.
Außerdem haben wir die folgende Erklärung auf einigen mobilen Websites gesehen:
Die Codekopie lautet wie folgt:
<! DocType html public "-// wapforum // dtd xhtml mobil 1.0 // en" "http://www.wapforum.org/dtd/xhtml-mobile10.dtd">
Der Weg zum Setzen von DTD ist XHTML. Wenn unsere Seite HTML5 verwendet, können Sie <! DocType html> direkt deklarieren, ohne DTD festzulegen.
Verwenden Sie das Ansichtsfenster, um zu verhindern, dass die Seite zoomt. Normalerweise setze die Benutzer skalierbar auf 0, um die Benutzerskalierung der Seitenansicht auszuschalten.
<meta name = "viewport" content = "user-scalable = 0" />
Für eine bessere Kompatibilität werden wir jedoch die vollständigen Ansichtsfenstereinstellungen verwenden.
Die Codekopie lautet wie folgt:
<meta name = "viewPort" content = "width = Gerätebreite, initiale scale = 1.0, maximal scale = 1.0, user-scalable = 0" />
Natürlich skalierbarer = 0, und einige Leute schreiben auch benutzerfreundliche = no, die beide in Ordnung sind.5. Apple-Mobile-Web-App-fähig
Apple-Mobile-Web-App-fähig ist zu festlegen, ob die Webanwendung im Vollbildmodus ausgeführt wird.
Grammatik:
<meta name = "Apple-Mobile-Web-App-capable" content = "yes">
veranschaulichen:
Wenn der Inhalt auf Ja eingestellt ist, wird die Webanwendung im Vollbildmodus ausgeführt, da dies sonst nicht der Fall ist. Der Standardwert des Inhalts lautet nein, was die normale Anzeige anzeigt. Sie können das schreibgeschützte Eigenschaftsfenster.navigator.Standalone verwenden, um festzustellen, ob die Webseite im Vollbildmodus angezeigt wird.
6. Formaterkennung
Die Formaterkennung ermöglicht oder deaktiviert die Telefonnummer auf der Seite der automatischen Erkennung.
Grammatik:
<meta name = "format-detektion" content = "telefon = no">
veranschaulichen:
Standardmäßig erkennt das Gerät automatisch jede Zeichenfolge, die möglicherweise eine Telefonnummer ist. Einstellen von Telefon = Nein kann diese Funktion deaktivieren.
7. HTML5 ruft die Wählfunktion von Android oder iOS auf
HTML5 bietet Tags, die automatisch das Wählen aufrufen. Fügen Sie einfach Tel: Im HREF des Tags ein Tag hinzu.
wie folgt:
<a href = "Tel: 4008106999,1034"> 400-810-6999 Biegen Sie 1034 </a>
Rufen Sie Ihr Telefon direkt wie folgt an
<a href = "Tel: 15677776767"> Klicken Sie hier, um 15677776767 </a> anzurufen
8. HTML5GPS -Positionierungsfunktion
Weitere Informationen finden Sie unter: //www.vevb.com/post/html5_gps_getCurrentPosition
9. Beim Ziehen der Scrollstange rauf und unten ist sie festgefahren oder langsam
Körper {-webkit-Overflow-Scrolling: Berührung; Überlauf-Scrolling: Berührung;}Android3+ und iOS5+ Unterstützung CSS3 Neue Attribute sind Überlauf-Scrolling
10. Das Kopieren oder Auswählen von Text ist verboten
Element {-webkit-user-Select: Keine; -moz-user-Select: Keine; -khtml-user-Select: Keine; Benutzer-Select: Keine;}Lösen Sie den Text der Seite, der für mobile Geräte ausgewählt werden kann (abhängig von den Produktanforderungen)
11. Drücken Sie die Seite für lange Zeit und stürzen Sie
Element {-webkit-touch-callout: Keine;}12. Standardschatten im Eingangsfeld unter iPhone und iPad
Element {-Webkit -Appearance: Keine; }13. Durchscheinende graue Maske erscheint beim Berühren von Elementen unter iOS und Android
Element {-Webkit-Tap-Highlight-Color: RGBA (255.255,255,0)}Wenn Sie den Alpha -Wert auf 0 festlegen, können Sie die durchscheinende graue Maske entfernen. Hinweis: Der Eigenschaftswert von transparent ist unter Android ungültig.
Der folgende Artikel hat eine detaillierte Einführung, Adresse: http://www.vevb.com/post/phone_web_ysk
14. Aktive Kompatibilitätsverarbeitung ist die Pseudoklasse: aktiv ungültig
Methode 1: OnTouchstart zum Körper hinzufügen
<Body OnTouchstart = "">
Methode 2: JS bindet TouchStart- oder Touchend -Ereignisse zum Dokumentieren
<Styles> a {color: #000;} a: aktiv {color: #fff;} </style> <a Herf = foo> bange </a> <Script> document.adDeVentListener ('TouchStart', function () {}, false); </script>15. Animationsdefinition 3D ermöglicht die Beschleunigung der Hardware
Element {-webkit -transform: translate3d (0, 0, 0) Transformation: Translate3d (0, 0, 0);}Hinweis: Die 3D -Verformung verbraucht mehr Speicher und Leistung
16. 1PX -Rand des Retina -Bildschirms
Element {Border-Width: Dünn;}17. Webkit -Maske kompatible Verarbeitung
Einige Low-End-Telefone unterstützen keine CSS3-Maske und können optional herabgestuft werden.
Zum Beispiel können Sie JS -Urteilsvermögen verwenden, um sich auf verschiedene Klassen zu beziehen:
if ('webkitmask' in document.documentElement.style) {alert ('Support -Maske');} else {alert ('s, die nicht unterstützte Maske');};};};};18. Probleme der Schriftgrößenanpassung beim Drehen des Bildschirms
HTML, Körper, Form, Fieldset, P, Div, H1, H2, H3, H4, H5, H6 {-Webkit-Text-Größe: 100%;}19. Übergangsblitzbildschirm
/Stellen Sie fest, wie eingebettete Elemente im 3D-Raum gerendert werden: Erhalten Sie 3D/-Webkit-Transform-Stil: Preserve-3D;/Legen Sie fest, ob die Rückseite des Elements, das konvertiert wird, sichtbar ist, wenn Sie dem Benutzer gegenüberstehen: Hide/-Webkit-Backface-Sicht: Hidden;
20. Runder Eckwanzen
Einige Android -Telefone sind abgerundete Ecken fehlgeschlagen
Hintergrund-Clip: Padding-Box;
21. Top Status Bar Hintergrundfarbe
<meta name = "Apple-Mobile-Web-app-status-bar" content = "schwarz" />
veranschaulichen:
Wenn Sie nicht zuerst Apple-Mobile-Web-App-fähig verwenden, um den Vollbildmodus anzugeben, funktioniert dieses Meta-Tag nicht.
Wenn der Inhalt auf Standard eingestellt ist, wird die Statusleiste normal angezeigt. Wenn die Statusleiste auf leer eingestellt sind, hat sie einen schwarzen Hintergrund. Wenn die Statusleiste auf leer-transluzent eingestellt sind, erscheint die Statusleiste schwarz durchscheinend. Wenn auf Standard oder leer eingestellt ist, wird die Seite unterhalb der Statusleiste angezeigt, dh die Statusleiste nimmt den oberen Teil und die Seite den unteren Teil ein. Beide werden nicht von der anderen Partei blockiert oder blockiert. Wenn die Seite auf leer-transluzent eingestellt ist, füllt sie den Bildschirm, auf dem die Oberseite der Seite von der Statusleiste abgedeckt wird (sie deckt die Höhe der Seite um 20px ab, während der Retina-Bildschirm für iPhone4 und ITouch4 40px beträgt). Der Standardwert ist Standard.
22. Cache einrichten
<meta http-äquiv = "cache-control" content = "no-cache" />
Mobile Seiten werden normalerweise nach der ersten Last zwischengespeichert, und bei jeder Aktualisierung wird der Cache verwendet, anstatt die Anforderung an den Server zu senken. Wenn Sie keinen Cache verwenden möchten, können Sie No-Cache festlegen.
23. Desktop -Symbole
<link rel = "Apple-touch-icon" href = "touch-icon-iPhone.png" /> <link rel = "Apple-Touch-icon" Größen = "76x76" href = "touch-icon-ipad.png" /> <link rel = "apple-touch-icon" 12000000000000 ". /> <link rel = "Apple-touch-icon" Größen = "152x152" href = "touch-icon-ipad-retina.png" />
Definieren Sie verschiedene Desktop -Symbole für verschiedene Geräte unter iOS. Wenn nicht definiert, verwenden Sie den aktuellen Screenshot als Symbol.
Es kann angenommen werden, dass die obige Schreibmethode einen Standardgloss hat. Die folgende Einstellungsmethode kann den Glanzeffekt entfernen und den Effekt der Entwurfszeichnung wiederherstellen!
<link rel = "Apple-touch-icon-prüfelt" href = "touch-icon-iphone.png" />
Die Bildgröße kann auf 5757 (PX) oder Retina eingestellt werden, die auf 114114 (PX) eingestellt werden kann und die iPad -Größe 72*72 (PX) beträgt.
24. Startbildschirm
<link rel = "Apple-Touch-Startup-Image" href = "start.png"/>
Das Bild, das angezeigt wird, wenn die Seite unter iOS geladen wird, soll den weißen Bildschirm beim Laden vermeiden.
Verschiedene Größen können durch Matrix angegeben werden:
<!--iPhone--><link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" /><!-- iPhone Retina --><link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and . href = "Apple-Touch-Startup-Image-640x1096.png"> <!-iPad-Porträt-> <link href = "Apple-Touch-Startup-Image-768x1004.png" Media = "(Geräte-Width: 768PX) und (Orientierung: Porträt)" rel = "Apple-Touch-Start-Start-Start-Start-Start-Start-Start-Start-Start-Start-"-"Apple-Touch-Startup-Start" /<!--> <! href = "Apple-Touch-Startup-Image-748x1024.png" Media = "(Gerätebreite: 768px) und (Orientierung: Landschaft)" rel = "Apple-Touch-Startup-Image" /> <!-iPad Retina-Porträt-> <link href = "appel-touch-startup-iMage-1736x2008.png" media "(applytouch-image) -Mage-image-1536x2008.png" media = "(apply-touch-startup-simage-1536x2008.png" media "(apply-applytouch-iMage 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /><!-- iPad Retina landscape --><link href="apple-touch-startup-image-1496x2048.png"media="(device-width: 1536px) and (orientation: landscape) and (-Webkit-Device-Pixel-ratio: 2) "rel =" Apple-Touch-Startup-Image " />
25. Browser Private und andere Meta
Die folgenden Attribute wurden im Projekt nicht angewendet. Sie können eine Demo schreiben, um Folgendes zu testen!
QQ Browser Privat
Vollbildmodus
<meta name = "x5-fullscreen" content = "true">
Erzwungener vertikaler Bildschirm
<meta name = "x5-orientation" content = "porträt">
Erzwungener horizontaler Bildschirm
<meta name = "x5-orientation" content = "Landscape">
Anwendungsmodus
<meta name = "x5-page-mode" content = "App">
UC Browser Privat
Vollbildmodus
<meta name = "full screen" content = "yes">
Erzwungener vertikaler Bildschirm
<meta name = "Screen-orientation" content = "Porträt">
Erzwungener horizontaler Bildschirm
<meta name = "Screen-orientation" content = "Landscape">
Anwendungsmodus
<meta name = "browsmode" content = "application">
andere
Optimiert für Handheld -Geräte, hauptsächlich für einige alte Browser, die Ansichten wie Blackberry nicht erkennen
<meta name = "handheldly" content = "true">
Microsofts alter Browser
<meta name = "mobiloptimized" content = "320">
Windows Phone Klicken Sie ohne Highlights
<meta name = "msapplication-tap-Highlight" content = "no">
26. Support von KeyUp, KeyDown und Schlüsselpress in iOS ist nicht sehr gut
Das Problem ist Folgendes: Wenn Sie die Eingabe -Suche nach Fuzzy -Suche verwenden, geben Sie Schlüsselwörter in die Tastatur ein und wenden Sie sich über den Ajax -Hintergrund ab, geben Sie die Daten zurück und markieren Sie dann die Schlüsselwörter für die zurückgegebenen Daten rot. Es ist in Ordnung, Eingaben zu verwenden, um Tastatur -Tastaturereignisse in Android Mobile Browsern zu überwachen, aber es wird in iOS -mobilen Browsern sehr langsam rot. Nach der Eingabe der Eingabemethode wird das Schlüssel -Ereignis nicht sofort entsprechend. Es kann erst nach dem Löschen entsprechend sein!
Lösung:
Sie können das Oninput -Ereignis von HTML5 verwenden, um KeyUp zu ersetzen
<input type = "text" id = "testinput"> <script type = "text/javaScript"> document.getElementById ('testinput'). AddEventListener ('Eingabe', Funktion (e) {var value = e.target.value;}); </script>Dann erzielen Sie einen keyUp-ähnlichen Effekt!
27. Das Problem der Eingabe der H5 -Website auf type = nummer
Das Einstellen der Eingabetyp der H5 -Webseite in die Anzahl führt im Allgemeinen drei Probleme. Ein Problem ist, dass das MaxLength -Attribut nicht einfach zu bedienen ist. Das andere ist, dass es standardmäßig abgerundet wird, wenn das Formular eingereicht wird. Drittens haben einige Android -Telefone Stilprobleme.
Sobald das Problem gelöst ist, verwende ich derzeit JS. wie folgt
<input type = "number" onInput = "checkTextLength (this, 10)"> Funktion checkTextLength (obj, länge) {if (obj.value.length> länge) {obj.value = obj.value.substr (0, Länge); }}Frage 2 liegt daran, dass die Formulareinstellungsstände zur Form -Überprüfung, die Stufe standardmäßig 1 beträgt und das Schrittattribut festgelegt werden muss. Wenn 2 Dezimalstellen erhalten bleiben, lautet die Schreibmethode wie folgt:
<Eingabe type = "number" Schritt = "0.01" />
In Bezug auf Schritt werde ich hier eine kurze Einführung geben. In Eingabetyp = Anzahl = wird ein Auf- und Ab -Pfeil im Allgemeinen automatisch generiert. Wenn Sie auf den Up -Pfeil klicken, fügt dies standardmäßig einen Schritt hinzu. Durch Klicken auf den Down -Pfeil wird standardmäßig einen Schritt reduziert. Der Standardschritt in der Anzahl beträgt 1. Das heißt, Schritt = 0,01, Sie können Eingabe von 2 Dezimalstellen zulassen und auf die Auf- und Ab -Pfeile klicken, um 0,01 zu erhöhen und 0,01 zu verringern.
Wenn Schritt und min zusammen verwendet werden, muss der Wert zwischen Min und Max liegen.
Siehe das folgende Beispiel:
<Eingabetyp = "Zahl" Schritt = "3.1" min = "1" />
Welche Zahlen können in das Eingabefeld eingegeben werden?
Wenn der Mindestwert 1 beträgt, können Sie zunächst 1.0 eingeben, der zweite ist einzugeben (1+3,1), dh 4,1 usw., jeder Klick auf den Auf- und Ab -Pfeil erhöht oder nimmt um 3,1 ab, und die Eingabe anderer Zahlen sind ungültig. Dies ist die kurze Einführung in den Schritt.
Frage 3: Entfernen Sie den Standardeingangsstil
input [type = number] {-moz-upearance: textField;} input [type = number] ::-webkit-rein-spin-button, input [type = numme] ::-webkit-outter-spin-button {-webkit-upearance: keine; Rand: 0;}28. Der iOS -Einstellungstaststil wird durch den Standardstil überschrieben
Die Lösung lautet wie folgt:
Eingabe, textarea {Border: 0; -Webkit-Appearanz: Keine; }Setzen Sie den Standardstil auf keine
29. IOS -Tastaturbriefeingabe, Standard -Erstbriefkapitalisierung
Lösung: Stellen Sie die folgenden Eigenschaften ein
<Eingabe type = "text" autocapitalize = "off" />
30. Dropdown-Auswählen Sie die rechte Ausrichtung einstellen
Die Einstellungen sind wie folgt:
Option {Richtung auswählen: rtl;}31. Die Verformung der Schrägstrafe wird durch Transformation durchgeführt. Drehrotation verursacht das Zaggen
Es kann wie folgt festgelegt werden:
-Webkit-transform: rotate (-4deg) sack (10deg) translatez (0); Transformation: Drehen (-4DEG) SCEW (10DEG) TranslateZ (0); Umriss: 1PX Solid RGBA (255.255,255,0)
32. Mobile Klicken Sie auf 300 ms Verzögerung
300 ms sind immer noch akzeptabel, aber wir müssen das durch 300 ms verursachte Problem lösen. 300 ms bewirkt, dass die Benutzererfahrung nicht sehr gut ist. Um dieses Problem zu lösen, verwenden wir im Allgemeinen TAP -Ereignisse, um Klickereignisse auf der mobilen Seite zu ersetzen.
Zwei JS werden empfohlen, einer ist Fastclick und der andere tap.js
Für die Verzögerung von 300 ms siehe: http://thx.github.io/mobile/300ms-click-delay/
33. Problem
Beispiele sind wie folgt:
<div id = "haorooms"> nod event test </div> <a href = "www.vevb.com"> www.vevb.com </a>
Die DIV ist die absolute Positionierungsmaske, und der Z-Index ist höher als a. Das A -Tag ist ein Link auf der Seite. Wir binden das TAP -Ereignis an die DIV:
$ ('#harooms'). on ('tap', function () {$ ('#harooms'). hide ();});Wenn wir auf die Maskenebene klicken, verschwindet das DIV normal, aber wenn wir auf die Maskenebene auf dem A-Tag klicken, stellen wir fest, dass der Link A ausgelöst wird, was als Punkt-Through-Ereignis bezeichnet wird.
Grund:
TouchStart Adjede Touchend PRED -Klick. Das heißt, das Klick -Auslösen wird verzögert und diese Zeit beträgt ca. 300 ms. Das heißt, die Maske ist nach unserem Auslöser versteckt. Zu diesem Zeitpunkt wurde der Klick nicht ausgelöst. Nach 300 ms löst unser Klick zum Link unten aus, da die Maske versteckt ist.
lösen:
(1) Versuchen Sie, das Touch -Ereignis zu verwenden, um das Klickereignis zu ersetzen. Verwenden Sie beispielsweise das Touchend -Ereignis (empfohlen).
(2) Verwenden Sie Fastclick, https://github.com/ftlabs/fastclick
(3) Blockieren Sie PreventDefault, um das Klicken eines Tags zu blockieren
(4) Verzögern Sie eine bestimmte Zeit (300 ms+), um Ereignisse zu verarbeiten (nicht empfohlen)
(5) Das oben genannte kann im Allgemeinen gelöst werden, aber wenn es wirklich nicht funktioniert, wird es durch einen Klick -Vorfall ersetzt.
Das Folgende ist wie folgt das Touchend -Ereignis:
$ ("#harooms"). on ("Touchend", Funktion (Ereignis) {Event.PreventDefault ();});34. Beseitigen Sie die Gabelnummer in IE10
Eingabe: -ms-conar {display: keine;}35. In Bezug auf die Optimierung von Schriftarten auf iOS und OS X (es wird inkonsistente Schriftart fett auf den horizontalen und vertikalen Bildschirmen usw. geben)
Die Schriftgröße wird zurückgesetzt, wenn der iOS -Browser angelegt ist. Das Einstellen von Textgröße, die an keine eingestellt werden, kann das Problem auf iOS lösen, aber die Schriftskalierungsfunktion von Safari auf der Desktop-Version ist ungültig. Die beste Lösung besteht darin, die Textgröße auf 100%zu verwandeln.
-Webkit-text-Größe-Anpassung: 100%;-ms-textgröße-adjust: 100%; textgröße-adjust: 100%;
36. Über das iOS-System, wenn Sie mit chinesischer Eingangsmethode Englisch eingeben, kann zwischen den Buchstaben ein Sechsel-Raum erscheinen.
Kann von regulär entfernt werden
this.Value = this.Value.Replace (// u2006/g, '');
37. Mobiles HTML5 -Audio -Autoplay -Fehlerproblem
Dies ist kein Fehler. Da das automatische Abspielen von Audio oder Video in Webseiten Probleme oder unnötigen Verkehrsverbrauch für Benutzer verursacht, verbieten Apple- und Android -Systeme die automatische Wiedergabe und die Wiedergabe mit JS in der Regel. Es muss vom Benutzer ausgelöst werden, bevor er gespielt werden kann.
Lösung: Berühren Sie zuerst den Benutzer -TouchStart, auslösen Wiedergabetaste und Pause (das Audio beginnt das Laden und verwenden Sie dann JS, um sie erneut zu bedienen).
Lösungscode:
document.adDeVentListener ('TouchStart', function () {document.GetElementsByTagName ('audio') [0] .play (); document.GetElementsByTagName ('audio') [0] .pause ();});38. Das Problem, dass der Platzhalter nicht am mobilen HTML5 -Eingabedatum unterstützt wird
Ich glaube nicht, dass es eine gute Lösung dafür gibt. Verwenden Sie die folgende Methode
Die Codekopie lautet wie folgt:
<Input Placeholder = "Datum" type = "text" onfocus = "(this.type = 'Datum')" id = "Datum">
Einige Browser müssen möglicherweise zweimal klicken!39. Einige Modelle haben Eingabe mit Typsuche, und ihre eigene Modifikationsmethode für die Modifikation des Schließens wird bereitgestellt.
Einige Modelle der Sucheingabesteuerelemente werden mit einer Schließung (einer Pseudoelement) ausgestattet, und normalerweise werden wir selbst eine mit allen Browsern kompatibel sein. Zu diesem Zeitpunkt ist die Methode zum Entfernen der nativen Schließknopf
#Search ::-webkit-search-cancel-button {display: Keine; }Wenn Sie die native Taste verwenden möchten und sie dem Designstil entsprechen möchten, können Sie den Stil dieses Pseudoelements ändern.
40. Ermutigen Sie die Option zum Erweitern
Zepto -Methode:
$ (sltelement) .trrgger ("MouseDown");Native JS -Methode:
Funktion showdropdown (slTelement) {var Ereignis; event = document.createEvent ('Mouseevents'); Event.initMouseEvent ('MouseDown', wahr, wahr, Fenster); sltelement.dispatcheEvent (Ereignis);};