Grundlegende Fähigkeiten für die Entwicklung von Mobiltelefonen: Javascript- und CSS-Funktionscode-Sharing

1. Ansichtsfenster:

Das ist der sichtbare Bereich. Bei Desktop-Browsern wissen wir alle, was ein Ansichtsfenster ist. Dabei handelt es sich um den Bereich, der zum Anzeigen von Webseiten verwendet wird, nachdem alle Symbolleisten, Statusleisten, Bildlaufleisten usw. entfernt wurden.
Das ist der Bereich, in dem es wirklich funktioniert. Da sich die Bildschirmbreite mobiler Geräte von der des herkömmlichen Webs unterscheidet, müssen wir das Darstellungsfenster ändern;

Eigentlich gibt es 4 Attribute, die wir bedienen können:

Code kopieren Der Code lautet wie folgt:

width – // Breite des Ansichtsfensters (Bereich von 200 bis 10.000, Standard 980 Pixel) 

height – // Höhe des Ansichtsfensters (Bereich von 223 bis 10.000) 

initial-scale – // Anfängliche Skalierung (im Bereich von >0 bis 10) 

Minimum-Scale – // Minimaler Maßstab, auf den der Benutzer zoomen darf

Maximum-Scale – // Das maximale Verhältnis, auf das der Benutzer zoomen darf

Benutzerskalierbar – // Ob der Benutzer manuell verkleinern kann (nein, ja)

Wie genau informieren diese Einstellungen Safari darüber? Es ist eigentlich ganz einfach, nur ein Meta, in der Form:

Code kopieren Der Code lautet wie folgt:

 // Ein weiterer Trick für Offline-Anwendungen 

 //Der Stil der Statusleiste oben in Safari im angegebenen iPhone   

 //Das Gerät anweisen, Nummern auf der Seite als Telefonnummern zu ignorieren 

Nachdem wir initial-scale=1 gesetzt haben, können wir die Seite endlich im Verhältnis 1:1 gestalten. In Bezug auf das Ansichtsfenster ist ein weiteres sehr wichtiges Konzept: Der Safari-Browser des iPhones hat überhaupt keine Bildlaufleisten, und es handelt sich nicht um ein einfaches „Bildlaufleiste ausblenden“, er verfügt überhaupt nicht über diese Funktion. Der Safari-Browser des iPhones zeigt die Webseite tatsächlich von Anfang an vollständig an und verwendet dann das Ansichtsfenster, um einen Teil davon anzuzeigen. Wenn Sie mit dem Finger ziehen, ziehen Sie eigentlich nicht die Seite, sondern das Ansichtsfenster. Die Änderung des Browserverhaltens beschränkt sich nicht nur auf die Bildlaufleiste, auch die Interaktionsereignisse unterscheiden sich von denen auf dem normalen Desktop.

2. Link:

Code kopieren Der Code lautet wie folgt: // Legen Sie das Startseitenbild fest

// Sie können beim Setzen von Lesezeichen schöne Symbole anzeigen

//Stil für vertikalen Bildschirm 

//Stil, der im Querformat verwendet wird 

3. Veranstaltung:

Code kopieren

Der Code lautet wie folgt:

//Gestenereignis

touchstart //Wird ausgelöst, wenn ein Finger den Bildschirm berührt

touchmove //Wird ausgelöst, wenn der Finger, der den Bildschirm berührt hat, sich zu bewegen beginnt

touchend //Wird ausgelöst, wenn der Finger den Bildschirm verlässt

Berühren Sie Abbrechen

//Touch-Ereignis

Gestestart //Wird ausgelöst, wenn zwei Finger den Bildschirm berühren

Gestenänderung //Wird ausgelöst, wenn zwei Finger den Bildschirm berühren und sich zu bewegen beginnen

gesteend

//Bildschirmrotationsereignis 

onorientationchange 

// Erkennen, wenn der Finger, der den Bildschirm berührt, die Richtung ändert 

Orientierungsänderung 

//Zugehörige Attribute, die vom Touch-Ereignis unterstützt werden

Berührungen 

targetTouches 

geändertBerührungen                                                                                   
clientX　　　// X-Koordinate der Berührung relativ zum Ansichtsfenster (ohne Scroll-Offset)  

clientY　　　// Y-Koordinate der Berührung relativ zum Ansichtsfenster (ohne Scroll-Offset)  

screenX　 // Relativ zum Bildschirm   

screenY // Relativ zum Bildschirm 

pageX　　　　// Relativ zur gesamten Seite (einschließlich Scrollen)  

pageY　　　 // Relativ zur gesamten Seite (einschließlich Scrollen)  

target　　 // Knoten, von dem das Berührungsereignis stammt  

Identifier　 // Eine Identifikationsnummer, die für jedes Berührungsereignis eindeutig ist

4. Bildschirmrotationsereignis: onorientationchange Fügen Sie die Bildschirmdrehungs-Ereignisüberwachung hinzu, um jederzeit den Status der Bildschirmdrehung (Linksdrehung, Rechtsdrehung oder keine Drehung) zu ermitteln. Beispiel:

Code kopieren Der Code lautet wie folgt:

// Bestimmen Sie, ob der Bildschirm gedreht wird 

Funktion OrientierungChange() { 

switch(window.orientation) { 

Fall 0: 

                 warning("Portrait mode 0,screen-width: " screen.width "; screen-height: " screen.height);
              Pause; 

Fall -90: 

warning("Linksdrehung -90,screen-width: " screen.width "; screen-height:" screen.height);
              Pause; 

Fall 90: 

                     warning("Rechtsdrehung 90,screen-width: " screen.width "; screen-height: " screen.height);
              Pause; 

Fall 180: 

warning("Querformat 180,screen-width: " screen.width "; screen-height:" screen.height);
Pause; 

};
};

//Ereignis-Listener hinzufügen 

addEventListener('load', function(){ 

OrientierungChange(); 

​ window.onorientationchange =orientierungChange;
});

5. Blenden Sie die Adressleiste aus und verhindern Sie, dass die Bildlaufleiste beim Bearbeiten von Ereignissen angezeigt wird:

Code kopieren

Der Code lautet wie folgt: // Adressleiste ausblenden und verhindern, dass die Bildlaufleiste bei der Verarbeitung von Ereignissen angezeigt wird addEventListener('load', function(){ setTimeout(function(){ window.scrollTo(0, 1); }, 100); });

6. Zwei-Finger-Gleitereignis:

Code kopieren

Der Code lautet wie folgt:

// Zwei-Finger-Schiebeereignis

addEventListener('load', Function(){ window.onmousewheel = twoFingerScroll;}, 

                                                                                                                                      // Kompatibel mit allen Browsern, bedeutet, dass der Event-Handler während der Bubbling-Phase (echte Erfassungsphase) aufgerufen wird 

); 

Funktion twoFingerScroll(ev) { 

var delta =ev.wheelDelta/120; var delta =ev.wheelDelta/120; //Beurteilen Sie den Delta-Wert (z. B. positiv oder negativ) und führen Sie dann die entsprechende Operation aus 

Rückgabe wahr; 

};

7. Stellen Sie fest, ob es sich um ein iPhone handelt:

Code kopieren Der Code lautet wie folgt:

// Feststellen, ob es sich um ein iPhone handelt: 

Funktion isAppleMobile() { 

Return (navigator.platform.indexOf('iPad') != -1);
}; 

8. lokaler Speicher:

Beispiel: (Beachten Sie, dass der Datenname n in Anführungszeichen eingeschlossen werden sollte)

Code kopieren Der Code lautet wie folgt:

var v = localStorage.getItem('n') ? localStorage.getItem('n') : "" // Wenn die Daten mit dem Namen n vorhanden sind, lesen Sie sie aus und weisen Sie sie der Variablen v zu. 

localStorage.setItem('n', v);                                                                                                                                         
localStorage.removeItem('n');                                                                            

9. Verwenden Sie spezielle Links:

Wenn Sie die automatische Erkennung deaktivieren und möchten, dass einige Telefonnummern mit der Wählfunktion des iPhones verknüpft werden, können Sie die Telefonverknüpfung wie folgt deklarieren:

Code kopieren Der Code lautet wie folgt: Ruf mich an

SMS senden

Oder für Zellen:

Code kopieren Der Code lautet wie folgt:

10. Automatische Großschreibung und automatische Korrektur

Um diese beiden Funktionen zu deaktivieren, können Sie die Optionen „Autokapitalisierung“ und „Autokorrektur“ verwenden:

Code kopieren Der Code lautet wie folgt:

11. WebKit-CSS:

① Das „Boxmodell“ beschreibt speziell den Inhalt des Begrenzungsrahmenblocks, einschließlich Rahmen, Füllung usw.

Code kopieren Der Code lautet wie folgt: -webkit-border-bottom-left-radius: radius;

-webkit-border-top-left-radius: horizontal_radius Vertical_radius;

-webkit-border-radius: radius; //Container abgerundete Ecken
-webkit-box-sizing: sizing_model; border-Konstantenwert: border-box/content-box
-webkit-box-shadow: hoff voff Unschärfefarbe; //Containerschatten (die Parameter sind: horizontaler X-Richtungsversatz; vertikaler Y-Richtungsversatz; Gaußscher Unschärferadiuswert; Schattenfarbwert)
-webkit-margin-bottom-collapse: Collapse_behavior; Konstanter Wert: Collapse/Discard/Separate
-webkit-margin-start: width;
-webkit-padding-start: width;
-webkit-border-image: url(borderimg.gif) 25 25 25 25 rund/dehnen rund/dehnen;
-webkit-appearance: push-button; // Integrierte CSS-Leistung, unterstützt derzeit nur push-button

②Das „visuelle Formatierungsmodell“ beschreibt die Eigenschaften und bestimmt die Position und Größe von Blockelementen.

Code kopieren Der Code lautet wie folgt:

Regie: rtl

unicode-bidi: bidi-override; Konstante: bidi-override/embed/normal

③ „Visuelle Effekte“ beschreibt Attribute und passt den Inhalt des Blocks für visuelle Effekte an, einschließlich Überlaufverhalten, Anpassungsverhalten, Sichtbarkeit, Animation, Transformation und Übergang.

Code kopieren Der Code lautet wie folgt:

Clip: rect(10px, 5px, 10px, 5px)

Größe ändern: automatisch; Konstante: auto/beide/horizontal/keine/vertikal

Sichtbarkeit: sichtbar; Konstante: einklappen/versteckt/sichtbar

-webkit-transition: Deckkraft 1s linear; Animationseffekt Ease/Linear/Ease-In/Ease-Out/Ease-In-Out

-webkit-backface-visibility: sichtbar; Konstante: sichtbar (Standardwert)/versteckt

-webkit-box-reflect: right 1px; Mirror reverse

-webkit-box-reflect: unter 4px -webkit-gradient(linear, links oben, links unten,

from(transparent), color-stop(0.5, transparent), to(white));

-webkit-mask-image: -webkit-gradient(linear, links oben, links unten, von(rgba(0,0,0,1)), bis(rgba(0,0,0,0)));; //CSS-Maske/Maskeneffekt

-webkit-mask-attachment: behoben; Konstante: behoben/scrollen

-webkit-perspective: value; Konstante: keine (Standard) 

-webkit-perspective-origin: links oben;

-webkit-transform: rotieren (5 Grad);

-webkit-transform-style: Preserve-3D; Konstante: Flat/Preserve-3D (2D und 3D)

④Mit dem Beschreibungsattribut „Inhalt, automatische Nummerierung und Liste generieren“ können Sie eine Inhaltskomponente ändern, automatisch nummerierte Kapitel und Titel erstellen und den Stil der Auflistung von Inhalten ändern.

Code kopieren Der Code lautet wie folgt:

Inhalt: Zähler(Abschnitt) „Artikel“ „;

Dadurch wird der Zähler zurückgesetzt.

Erster Abschnitt

>zwei Abschnitte

drei Abschnitte

Gegeninkrement: Abschnitt 1;

Zähler-Reset: Abschnitt;

⑤ „Paging-Medien“ beschreiben die Eigenschaften von Leistung und Aussehen und steuern das Verhalten gedruckter Versionen von Webseiten, wie z. B. Seitenumbrüche.

Code kopieren Der Code lautet wie folgt:

Seitenumbruch nach: auto; Konstante: immer/auto/vermeiden/links/rechts

Seitenumbruch vor: auto; Konstante: immer/auto/vermeiden/links/rechts

page-break-inside: auto; Konstante: auto/avoid

⑥Das Beschreibungsattribut „Farbe und Hintergrund“ steuert den Hintergrund von Elementen auf Blockebene und die Farbe von Textinhaltskomponenten.

Code kopieren Der Code lautet wie folgt:

-webkit-background-clip: content; Konstante: border/content/padding/text

-webkit-background-origin: padding; Konstante: border/content/padding/text

-webkit-background-size: 55px; Konstante: length/length_x/length_y

⑦ „Schriftart“ ist ein Faktor, der speziell die Art der Auswahl der Textschriftart beschreibt. Der Bericht beschreibt auch die Eigenschaften, die zum Herunterladen von Schriftartdefinitionen verwendet werden.

Code kopieren Der Code lautet wie folgt:

Unicode-Bereich: U 00-FF, U 980-9FF;

⑧ „Text“ beschreibt den spezifischen Textstil, den Abstand und das automatische Scrollen der Attribute.

Code kopieren Der Code lautet wie folgt:

Textschatten: #00FFFC 10px 10px 5px;

Texttransformation: Großschreibung; Konstante: Großschreibung/Kleinschreibung/keine/Großschreibung

Zeilenumbruch: Wortumbruch; Konstante: Wortumbruch/normal

-webkit-marquee: rechts groß unendlich normal 10s; Konstanten: Richtung (Richtung) Inkrement (Anzahl der Iterationen) Wiederholung (Wiederholung) Stil (Stil) Geschwindigkeit (Geschwindigkeit);
-webkit-marquee-direction: vorwärts/automatisch/rückwärts/unten/vorwärts/links/rückwärts/rechts/oben

-webkit-marquee-incrementt: 1-n/infinite(unendliche Zeiten)

-webkit-marquee-speed: schnell/normal/langsam

-webkit-marquee-style: alternative/none/scroll/slide

-webkit-text-fill-color: #ff6600; Konstanten: Großbuchstaben, Kleinbuchstaben, keine, Großbuchstaben

-webkit-text-security: Kreis; Konstante: Kreis/Scheibe/keine/Quadrat

-webkit-text-size-adjust: none; konstant: auto/none;
-webkit-text-Stroke: 15px #fff;

-webkit-line-break: after-white-space; Konstante: normal/after-white-space

-webkit-appearance: Feststelltaste-Anzeige;

-webkit-nbsp-mode: space; Konstante: normal/space

-webkit-rtl-ordering: logisch; Konstante: visuell/logisch

-webkit-user-drag: element; konstant: element/auto/none

-webkit-user-modify: read-only; Konstante: read-write-plaintext-only/read-write/read-only

-webkit-user-select: text; Konstante: text/auto/none

⑨ „Tabelle“ beschreibt das Layout und den spezifischen Inhalt der Designleistungstabelle.

Code kopieren Der Code lautet wie folgt:

-webkit-border-horizontal-spacing: 2px;

-webkit-border-vertikal-spacing: 2px;

-webkit-column-break-after: right; Konstante: immer/auto/avoid/left/right

-webkit-column-break-before: right; Konstante: immer/auto/avoid/left/right

–webkit-column-break-inside: logisch; Konstante: Vermeidung/Auto

-webkit-column-count: 3; //Spalte 

-webkit-column-rule: 1px solide #fff;

Stil: gestrichelt, gepunktet, doppelt, gerillt, ausgeblendet, eingefügt, keine, am Anfang, gerippt, durchgehend

⑩Das Beschreibungsattribut „Benutzeroberfläche“ umfasst Elemente der Benutzeroberfläche im Browser, z. B. scrollende Textbereiche, Bildlaufleisten usw. Der Bericht beschreibt auch Eigenschaften außerhalb des Seiteninhalts, z. B. den Callout-Stil des Cursors und die Anzeige, wenn Sie die Taste

gedrückt halten Ziel, wie ein Link auf einem iPhone.

Code kopieren Der Code lautet wie folgt:

-webkit-box-align: baseline,center,end,start,stretch konstant: baseline/center/end/start/stretch

-webkit-box-direction: normal; konstant: normal/umgekehrt

-webkit-box-flex: flex_valuet

-webkit-box-flex-group: Gruppennummer

-webkit-box-lines: multiple; Konstante: multiple/single

-webkit-box-ordinal-group: Gruppennummer

-webkit-box-orient: Blockachse; Konstante: Blockachse/Horizontal/Inline-Achse/Vertikal/Ausrichtung

–webkit-box-pack: Ausrichtung; Konstante: Mitte/Ende/Ausrichtung/Start

12. Animationsübergang

Dies ist die innovativste Funktion in Webkit: das Definieren von Animationen mithilfe von Übergangsfunktionen.

Code kopieren Der Code lautet wie folgt:

-webkit-animation: Titel unendliches Easy-in-out 3s;

Animation hat diese Attribute: 

-webkit-animation-name: //Attributname sind die von uns definierten Keyframes

-webkit-animation-duration: 3s //Dauer 

-webkit-animation-timing-function: //Übergangstyp: Ease/ linear (linear) /ease-in (langsam zu schnell) /ease-out (schnell zu langsam) /ease-in-out (langsam zu schnell und dann wieder langsam) /cubic-bezier

-webkit-animation-delay: 10 ms //Animationsverzögerung (Standard 0)

-webkit-animation-iteration-count: //Anzahl der Schleifen (Standard 1), unendlich ist unendlich

-webkit-animation-direction: //Animationsmodus: normal (Standard-Vorwärtswiedergabe); alternative (abwechselnde Richtung, gerade Vorwärtswiedergabe, ungerade Rückwärtswiedergabe) 

Diese können auch abgekürzt werden. Aber was mir wirklich ein gutes Gefühl gibt, sind Keyframes, die einen Animationstransformationsprozess für den Aufruf definieren können, der Prozess geht von 0 % auf 100 % oder von (0 %) auf (100 %). Einfach ausgedrückt: Solange Sie eine Idee haben, ist es sehr einfach, wie sich die Elemente während des Prozesses ändern sollen.

Code kopieren Der Code lautet wie folgt:

-webkit-transform: Typ (Skalieren/Drehen/Neigen/Verschieben/Übersetzen) 

Scale(num,num) Vergrößerung. ScaleX und ScaleY(3) können abgekürzt werden als: Scale(*, *)

rotieren(*Grad) Drehwinkel. rotierenX und rotierenY können wie folgt abgekürzt werden: rotieren(*, *)

Skew(*deg) Skew-Winkel. skewX und skewY können wie folgt abgekürzt werden: skew(*, *)

Translate(*,*) Koordinatenbewegung. TranslateX und TranslateY können wie folgt abgekürzt werden: Translate(*, *).

Beispiel für die Implementierung einer simulierten Popup-Meldungsbox (Alert):
① Übergang definieren (Keyframes im

Grundlegende Fähigkeiten für die Entwicklung von Mobiltelefonen: Javascript- und CSS-Funktionscode-Sharing_Javascript-Kenntnisse