Depuis la sortie des deux impressionnants systèmes d'exploitation mobiles, iPhone et Android, un nouveau terme est apparu dans le monde d'Internet : WebApp (qui désigne une application basée sur le WEB fonctionnant sur des appareils mobiles haut de gamme).
Tous les développeurs savent qu'il existe deux types d'applications dans les systèmes de smartphones haut de gamme : l'une est une APP native (basée sur le système d'exploitation) ; l'autre est une WebApp qui s'exécute dans le navigateur des téléphones haut de gamme. Cet article se concentrera sur la seconde.
I. Relatif à META/LINK :
1. Désactiver le transcodage Baidu
Lorsqu'on ouvre une page web via Baidu Mobile, Baidu peut transcoder votre page web et coller ses publicités sur votre page, ce qui est vraiment dégoûtant. Cependant, nous pouvons utiliser cette balise meta pour le désactiver :
<meta http-equiv="Cache-Control" content="no-siteapp" />
Liens connexes :Déclaration de transcodage SiteApp
2. Titre après l'ajout à l'écran d'accueil (iOS)
<meta name="apple-mobile-web-app-title" content="标题">
3. Activer le mode plein écran de WebApp (iOS)
Lorsque le site web est ajouté à l'écran d'accueil, puis lancé en appuyant dessus, la barre d'adresse peut être masquée (cet effet ne se produit pas lorsqu'on y accède via une redirection du navigateur ou en saisissant un lien).
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-touch-fullscreen" content="yes" />
PS : Cependant, après avoir testé avec mon propre iPhone 5S, définir « apple-touch-fullscreen » ne sert à rien. Si vous savez pourquoi, merci de nous le dire dans les commentaires en bas.
4. Définir la couleur d'arrière-plan de la barre d'état (iOS)
La définition de la couleur d'arrière-plan de la barre d'état ne prend effet que lorsque "apple-mobile-web-app-capable" content="yes" est défini.
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
paramètres de contenu :
- default: L'arrière-plan de la barre d'état est blanc.
- black: L'arrière-plan de la barre d'état est noir.
- black-translucent: L'arrière-plan de la barre d'état est semi-transparent. Si défini sur default ou black, le contenu de la page web commence à partir du bas de la barre d'état. Si défini sur black-translucent, le contenu de la page web remplit tout l'écran, et le haut sera masqué par la barre d'état.
6. Reconnaissance des numéros de téléphone mobile sur mobile (iOS)
Sur iOS Safari (les autres navigateurs et Android ne le font pas), les nombres qui ressemblent à des numéros de téléphone sont transformés en liens téléphoniques, par exemple :
- Nombres à 7 chiffres, tels que : 1234567
- Nombres avec des parenthèses et des signes plus, tels que : (+86)123456789
- Nombres avec des doubles tirets, tels que : 00-00-00111
- Nombres à 11 chiffres, tels que : 13800138000
Il peut y avoir d'autres types de nombres qui sont également reconnus. Nous pouvons désactiver la reconnaissance automatique des numéros de téléphone avec la balise meta suivante :
<meta name="format-detection" content="telephone=no" />
Mais parfois, après avoir désactivé la reconnaissance automatique des numéros de téléphone, vous pouvez souhaiter que certains numéros de téléphone soient liés aux fonctions d'appel et de SMS de l'iPhone lorsqu'ils sont longuement pressés. Vous pouvez utiliser les méthodes suivantes :
(2) Activer la fonction d'appel téléphonique :
<a href=”tel:123456″>123456</a>
(3) Activer la fonction SMS :
<a href=”sms:123456″>123456</a>
7. Reconnaissance des e-mails sur mobile (Android)
Comme pour la reconnaissance des numéros de téléphone, sur Android, les chaînes qui correspondent au format d'e-mail sont reconnues. Nous pouvons utiliser la balise meta suivante pour désactiver la reconnaissance automatique des e-mails :
<meta content=”email=no” name=”format-detection” />
De même, nous pouvons également utiliser des attributs de balise pour activer la fonction consistant à appuyer longuement sur une adresse e-mail afin de faire apparaître l'option d'envoi d'e-mail :
<a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>
8. Ajouter une Smart App Banner (Safari iOS 6+)
<meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”>
9. Animation de lancement d'une application web iOS
Comme l'écran de lancement de l'iPad n'inclut pas la zone de la barre d'état, l'image de lancement doit soustraire, dans la direction correspondant à la zone de la barre d'état,20pxde la taille ; en conséquence, sur les appareils Retina, soustrayez40pxde la taille.
<!-- 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. Icône d'application après ajout à l'écran d'accueil
Spécifiez le chemin de l'icône pour une application web après son ajout à l'écran d'accueil. Il existe deux manières légèrement différentes :
<!-- 设计原图 --> <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: Sur iOS 6 et versions antérieures, un effet de surbrillance est automatiquement ajouté à l'icône (à partir d'iOS 7, un style de design plat est utilisé).
- apple-touch-icon-precomposed：Utilisez l'« icône au design original »
Effet :
Taille de l'icône :
Vous pouvez spécifier l'attribut size pour fournir différentes icônes pour différents appareils (mais généralement, il suffit de fournir une icône de 114 x 114 pixels).
Les instructions officielles sont les suivantes
Créez différentes tailles de l'icône de votre application pour différents appareils. Si vous créez une application universelle, vous devez fournir des icônes d'application dans les quatre tailles.
Pour l'iPhone et l'iPod touch, ces deux tailles sont requises :
- 57 x 57 pixels
- 114 x 114 pixels (haute résolution)
Pour iPad, ces deux tailles sont requises :
- 72 x 72 pixels
- 144 x 144 (haute résolution)
11. Préférez la version la plus récente d'IE et de Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
II. HTML/CSS
1. Désactiver la majuscule automatique de la première lettre du clavier iOS
Dans iOS, par défaut, le clavier active la majuscule automatique. Si vous ne souhaitez pas activer cette fonctionnalité, vous pouvez procéder comme suit :
<input type="text" autocapitalize="off" />
2. Désactiver la correction automatique de la saisie sur iOS
Comme pour la majuscule automatique par défaut lors de la saisie en anglais, iOS dispose également d'une fonctionnalité où la méthode de saisie par défaut active la correction automatique du contenu saisi. Cela oblige souvent l'utilisateur à effectuer l'opération deux fois. Si vous ne souhaitez pas activer cette fonctionnalité, nous pouvons la désactiver via l'attribut de la balise input :
<input type="text" autocorrect="off" />
3. Désactiver la mise à l'échelle du texte
Lorsqu'un appareil mobile bascule entre les orientations paysage et portrait, la taille du texte est recalculée et mise à l'échelle en conséquence. Lorsque nous n'en avons pas besoin, nous pouvons choisir de la désactiver :
html {
-webkit-text-size-adjust: 100%;
}
Notez que cette propriété a été supprimée du côté PC. Pour que cette propriété prenne effet sur mobile, le `meta viewport` doit être défini.
4. Comment supprimer l'ombre intérieure des champs de saisie sur mobile
Sur iOS, les champs de saisie ont une ombre intérieure par défaut, mais elle ne peut pas être supprimée avec box-shadow. Si vous n'avez pas besoin de l'ombre, vous pouvez la désactiver comme ceci :
input,
textarea {
border: 0; /* 方法1 */
-webkit-appearance: none; /* 方法2 */
}
5. Défilement rapide par inertie
Commençons par examiner l'histoire du défilement par inertie dans les navigateurs mobiles :
- À l'origine, les navigateurs mobiles ne prenaient pas en charge les barres de défilement sur les éléments autres que body, c'est pourquoi iScroll était généralement utilisé.
- Android 3.0/iOS ont résolu le problème de défilement pour les éléments autres que body, mais la barre de défilement était invisible, et le défilement ne pouvait se faire qu'avec deux doigts.
- Android 4.0 a résolu le problème de la barre de défilement invisible et ajouté le défilement rapide par inertie, mais cette fonctionnalité a ensuite été supprimée.
- À partir d'iOS 5.0, le problème de la barre de défilement invisible a été résolu et le défilement rapide par inertie a été ajouté.
Sur iOS, si vous voulez qu'un élément ait un effet de défilement proche du natif, vous pouvez faire ceci :
.xxx {
overflow: auto; /* auto | scroll */
-webkit-overflow-scrolling: touch;
}
PS : Après avoir utilisé iScroll, je trouve qu'il n'est pas très bon et qu'il a des bugs bizarres. Ici, je recommande un autre, iDangero Swiper. Ce plugin intègre de puissantes fonctionnalités de glissement (prend en charge la 3D), et dispose aussi d'une barre de défilement avec inertie. Adresse officielle :
http://www.idangero.us/sliders/swiper/index.php
6. Désactiver la sélection de contenu sur mobile
Si vous ne voulez pas que les utilisateurs sélectionnent du contenu sur la page, vous pouvez le désactiver comme ceci :
.user-select-none {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all （移动端不需要） */
-ms-user-select: none; /* IE 10+ */
}
7. Supprimer l'effet de surbrillance tactile sur mobile
Lorsque vous travaillez sur des pages mobiles, vous remarquerez que toutes les balises a, lorsqu'elles sont déclenchées par un clic, ou tous les éléments avec la pseudo-classe :active, afficheront par défaut un encadré de surbrillance à l'état actif. Si vous ne voulez pas de cette surbrillance, vous pouvez la désactiver globalement avec la méthode CSS suivante :
html {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
Mais cette méthode ne fonctionne pas sur les appareils Samsung. Un compromis consiste à remplacer les balises a qui ne sont pas de vrais liens de navigation par d'autres balises, ce qui peut résoudre ce problème.
8. Comment désactiver l'enregistrement ou la copie des images (iOS)
Habituellement, lorsque vous effectuez un appui long sur une image (img) sur un téléphone ou une tablette, des options « Enregistrer l'image » ou « Copier l'image » apparaissent. Si vous ne voulez pas que les utilisateurs fassent cela, vous pouvez le désactiver avec les méthodes suivantes :
img { -webkit-touch-callout: none; }
Source : http://www.cnblogs.com/WhiteCusp/p/4502961.html