Web-App-Entwicklungstipps

Seit der Veröffentlichung der beiden beeindruckenden mobilen Betriebssysteme iPhone und Android ist in der Internetwelt ein neuer Begriff aufgetaucht – WebApp (was eine WEB-basierte Anwendung bedeutet, die auf High-End-Mobilgeräten läuft).

Entwickler wissen alle, dass es in High-End-Smartphone-Systemen zwei Arten von Anwendungen gibt: eine ist eine native (betriebssystembasierte) APP; die andere ist eine WebApp, die im Browser von High-End-Telefonen läuft. Dieser Artikel konzentriert sich auf Letztere.

I. META/LINK-bezogen:

1. Baidu-Transkodierung deaktivieren

Wenn eine Webseite über Baidu Mobile geöffnet wird, kann Baidu Ihre Webseite transkodieren und seine Anzeigen auf Ihre Seite einfügen, was wirklich ekelhaft ist. Wir können jedoch dieses Meta-Tag verwenden, um es zu deaktivieren:

<meta http-equiv="Cache-Control" content="no-siteapp" />

Verwandte Links:SiteApp-Transkodierungserklärung

2. Titel nach dem Hinzufügen zum Home-Bildschirm (iOS)

<meta name="apple-mobile-web-app-title" content="标题">

3. WebApp-Vollbildmodus aktivieren (iOS)

Wenn die Website zum Home-Bildschirm hinzugefügt und dann zum Starten angetippt wird, kann die Adressleiste ausgeblendet werden (dieser Effekt tritt nicht auf, wenn man über eine Browser-Weiterleitung oder durch Eingeben eines Links hineingelangt).

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />

PS: Nach Tests mit meinem eigenen iPhone 5S ist die Einstellung "apple-touch-fullscreen" jedoch nutzlos. Wenn du weißt, warum, lass es uns bitte in den Kommentaren unten wissen.

4. Hintergrundfarbe der Statusleiste festlegen (iOS)

Die Einstellung der Hintergrundfarbe der Statusleiste wirkt sich nur aus, wenn "apple-mobile-web-app-capable" content="yes" gesetzt ist.

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

content-Parameter:

default: Der Hintergrund der Statusleiste ist weiß.
black: Der Hintergrund der Statusleiste ist schwarz.
black-translucent: Der Hintergrund der Statusleiste ist halbtransparent. Wenn er auf default oder black gesetzt ist, beginnt der Webseiteninhalt am unteren Rand der Statusleiste. Wenn er auf black-translucent gesetzt ist, füllt der Webseiteninhalt den gesamten Bildschirm aus, und der obere Bereich wird von der Statusleiste verdeckt.

6. Erkennung von Mobilfunknummern auf Mobilgeräten (iOS)

In iOS Safari (bei anderen Browsern und Android nicht) werden Zahlen, die wie Telefonnummern aussehen, in Telefon-Links umgewandelt, zum Beispiel:

7-stellige Nummern, wie z. B.: 1234567
Nummern mit Klammern und Pluszeichen, wie z. B.: (+86)123456789
Nummern mit doppelten Bindestrichen, wie z. B.: 00-00-00111
11-stellige Nummern, wie z. B.: 13800138000

Es können auch andere Arten von Nummern erkannt werden. Wir können die automatische Telefonnummernerkennung mit dem folgenden Meta-Tag deaktivieren:

<meta name="format-detection" content="telephone=no" />

Aber manchmal, nachdem die automatische Telefonnummernerkennung deaktiviert wurde, möchten Sie vielleicht, dass bestimmte Telefonnummern beim Langdrücken mit den Anruf- und SMS-Funktionen des iPhone verknüpft werden. Sie können die folgenden Methoden verwenden:

(2) Telefonanruffunktion aktivieren:

<a href=”tel:123456″>123456</a>

(3) SMS-Funktion aktivieren:

<a href=”sms:123456″>123456</a>

7. E-Mail-Erkennung auf Mobilgeräten (Android)

Wie bei der Telefonnummernerkennung werden unter Android Zeichenfolgen, die dem E-Mail-Format entsprechen, erkannt. Wir können das folgende Meta verwenden, um die automatische E-Mail-Erkennung zu deaktivieren:

<meta content=”email=no” name=”format-detection” />

Auf ähnliche Weise können wir auch Tag-Attribute verwenden, um die Funktion zu aktivieren, dass beim langen Drücken auf eine E-Mail-Adresse die Option zum E-Mail-Versand eingeblendet wird:

<a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>

8. Smart App Banner hinzufügen (iOS 6+ Safari)

<meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”>

9. Startanimation für iOS-Web-Apps

Da der iPad-Startbildschirm den Bereich der Statusleiste nicht enthält, muss das Startbild in der dem Statusleistenbereich entsprechenden Richtung um20pxGröße reduziert werden; dementsprechend sind auf Retina-Geräten40pxvon der Größe abzuziehen.

<!-- iPhone -->
<link href="apple-touch-startup-image-320x460.png.html" media="(device-width: 320px)" rel="apple-touch-startup-image">
<!-- iPhone (Retina) -->
<link href="apple-touch-startup-image-640x960.png.html" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPad (portrait) -->
<link href="apple-touch-startup-image-768x1004.png.html" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image">
<!-- iPad (landscape) -->
<link href="apple-touch-startup-image-748x1024.png.html" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image">
<!-- iPad (Retina, portrait) -->
<link href="apple-touch-startup-image-1536x2008.png.html" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPad (Retina, landscape) -->
<link href="apple-touch-startup-image-2048x1496.png.html" media="(device-width: 1536px)  and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

（landscape：横屏 | portrait：竖屏）

10. APP-Symbol nach dem Hinzufügen zum Home-Bildschirm

Gib den Symbolpfad für eine Web-App an, nachdem sie zum Home-Bildschirm hinzugefügt wurde. Es gibt zwei leicht unterschiedliche Möglichkeiten:

<!-- 设计原图 -->
<link href="short_cut_114x114.png.html" rel="apple-touch-icon-precomposed">
<!-- 添加高光效果 -->
<link href="short_cut_114x114.png.html" rel="apple-touch-icon">

apple-touch-icon: Unter iOS 6 und früher wird dem Symbol automatisch ein Hervorhebungseffekt hinzugefügt (ab iOS 7 wird ein Flat-Design-Stil verwendet).
apple-touch-icon-precomposed：Verwende das "ursprünglich gestaltete Symbol"

Wirkung:

Symbolgröße:

Du kannst das size-Attribut angeben, um unterschiedliche Symbole für verschiedene Geräte bereitzustellen (im Allgemeinen müssen wir jedoch nur ein Symbol von 114 x 114 Pixel bereitstellen).

Die offiziellen Anweisungen lauten wie folgt

Erstelle App-Symbole in verschiedenen Größen für verschiedene Geräte. Wenn du eine Universal-App erstellst, musst du App-Symbole in allen vier Größen bereitstellen.

Für iPhone und iPod touch sind beide folgenden Größen erforderlich:

57 x 57 Pixel

114 x 114 Pixel (hohe Auflösung)

Für iPad sind beide folgenden Größen erforderlich:

72 x 72 Pixel

144 x 144 (hohe Auflösung)

11. Bevorzugen Sie die neueste Version von IE und Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

II. HTML/CSS

1. Automatische Großschreibung des ersten Buchstabens in der iOS-Tastatur deaktivieren

In iOS ist die automatische Großschreibung in der Tastatur standardmäßig aktiviert. Wenn Sie diese Funktion nicht aktivieren möchten, können Sie wie folgt vorgehen:

<input type="text" autocapitalize="off" />

2. Automatische Korrektur der iOS-Eingabe deaktivieren

Ähnlich wie bei der standardmäßigen automatischen Großschreibung für die englische Eingabe verfügt iOS auch über eine Funktion, bei der die Standardeingabemethode die automatische Korrektur des Eingabeinhalts aktiviert. Dies erfordert häufig zwei Bedienvorgänge durch den Benutzer. Wenn Sie diese Funktion nicht aktiviert haben möchten, können wir sie über das Attribut des input-Tags deaktivieren:

<input type="text" autocorrect="off" />

3. Textskalierung deaktivieren

Wenn ein Mobilgerät zwischen Quer- und Hochformat wechselt, wird die Textgröße neu berechnet und entsprechend skaliert. Wenn wir dies nicht benötigen, können wir es deaktivieren:

html {
　　-webkit-text-size-adjust: 100%;
}

Beachten Sie, dass diese Eigenschaft auf der PC-Seite entfernt wurde. Damit diese Eigenschaft auf Mobilgeräten wirksam wird, muss `meta viewport` gesetzt sein.

4. Wie entfernt man den inneren Schatten von Eingabefeldern auf Mobilgeräten

Unter iOS haben Eingabefelder standardmäßig einen inneren Schatten, aber dieser kann nicht mit box-shadow entfernt werden. Wenn Sie den Schatten nicht benötigen, können Sie ihn so deaktivieren:

input,
textarea {
　　border: 0; /* 方法1 */
　　-webkit-appearance: none; /* 方法2 */
}

5. Schnelles Momentum-Scrolling

Schauen wir uns zunächst die Geschichte des Momentum-Scrollings in mobilen Browsern an:

In den Anfängen unterstützten mobile Browser keine Scrollbalken für Nicht-Body-Elemente, daher wurde im Allgemeinen iScroll verwendet.
Android 3.0/iOS löste das Scrollproblem für Nicht-Body-Elemente, aber der Scrollbalken war unsichtbar, und unter iOS konnte nur mit zwei Fingern gescrollt werden.
Android 4.0 löste das Problem des unsichtbaren Scrollbalkens und fügte schnelles Momentum-Scrolling hinzu, aber diese Funktion wurde später entfernt.
Ab iOS 5.0 wurde das Problem des unsichtbaren Scrollbalkens gelöst und schnelles Momentum-Scrolling hinzugefügt.

Wenn Sie unter iOS möchten, dass ein Element einen nativ-ähnlichen Scrolling-Effekt hat, können Sie Folgendes tun:

.xxx {
    overflow: auto; /* auto | scroll */
    -webkit-overflow-scrolling: touch;
}

PS: Nachdem ich iScroll verwendet habe, finde ich es nicht sehr gut und es hat einige seltsame Fehler. Hier empfehle ich ein anderes, iDangero Swiper. Dieses Plugin integriert leistungsstarke Sliding-/Scrolling-Funktionen (unterstützt 3D) und hat auch einen integrierten Scrollbalken mit Momentum-Scrolling. Offizielle Adresse:

http://www.idangero.us/sliders/swiper/index.php

6. Inhaltsauswahl auf Mobilgeräten deaktivieren

Wenn Sie nicht möchten, dass Benutzer Inhalte auf der Seite auswählen, können Sie dies in CSS deaktivieren:

.user-select-none {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all （移动端不需要） */
  -ms-user-select: none;      /* IE 10+ */      
}

7. Touch-Hervorhebungseffekt auf Mobilgeräten entfernen

Wenn Sie an mobilen Seiten arbeiten, werden Sie feststellen, dass alle a-Tags, wenn sie durch einen Klick ausgelöst werden, oder alle Elemente mit der Pseudoklasse :active standardmäßig im aktiven Zustand ein Hervorhebungsfeld anzeigen. Wenn Sie diese Hervorhebung nicht wünschen, können Sie sie global mit der folgenden CSS-Methode deaktivieren:

html {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

Aber diese Methode funktioniert auf Samsung-Geräten nicht. Ein Kompromiss besteht darin, a-Tags, die keine echten Navigationslinks sind, durch andere Tags zu ersetzen, was dieses Problem lösen kann.

8. So deaktivieren Sie das Speichern oder Kopieren von Bildern (iOS)

Wenn Sie normalerweise ein Bild (img) auf einem Telefon oder Tablet lange drücken, erscheinen Optionen wie „Bild sichern“ oder „Bild kopieren“. Wenn Sie nicht möchten, dass Benutzer dies tun, können Sie es mit den folgenden Methoden deaktivieren:

 img { -webkit-touch-callout: none; }

Quelle: http://www.cnblogs.com/WhiteCusp/p/4502961.html

Zusammenfassung der Tipps zur Web-App-Entwicklung

Kategorie Programmiertechnologie