Optimisation mobile

Réponse retardée de 300 ms du clic

Le délai de 300 ms du clic est dû à une double pression pour zoomer. Étant donné que l'utilisateur peut appuyer deux fois pour zoomer ou appuyer deux fois pour faire défiler, lorsqu'il clique une fois après avoir visualisé le lien, le Le navigateur ne peut pas déterminer immédiatement si l'utilisateur souhaite réellement ouvrir le lien ou double-cliquer dessus. Par conséquent, le navigateur mobile attend 300 millisecondes pour déterminer si l'utilisateur clique à nouveau sur l'écran.

Avec le nombre croissant de pages Web réactives, les utilisateurs ont moins de possibilités d'utiliser le double-clic pour zoomer, et ce délai de 300 ms est encore plus inacceptable. Les développeurs de navigateurs proposent également des solutions correspondantes. Ces solutions sont mentionnées dans 5 façons d'éviter le délai de clic de 300 ms sur les appareils mobiles, notamment « désactiver la mise à l'échelle » et « largeur = largeur de l'appareil ». Cependant, ces solutions ne sont pas parfaites et doivent être ciblées sur certaines versions du navigateur. , ou utilisez simplement le navigateur sur Android.

Donc, à l'heure actuelle, une solution plus simple et plus générale est nécessaire. Parmi elles, FT Labs est une bibliothèque légère FastClick développée spécifiquement pour résoudre le problème de délai de clic de 300 millisecondes des navigateurs mobiles. Lorsque FastClick détecte un événement touchend, il déclenche immédiatement un événement de clic simulé via un événement personnalisé DOM et bloque l'événement de clic réellement déclenché par le navigateur après 300 millisecondes.

FastClick est très simple à utiliser. Après l'événement de chargement de la fenêtre, appelez FastClick.attach() sur <body>. <body> 上调用FastClick.attach() 即可。

window.addEventListener( "load", function() {
    FastClick.attach( document.body );
}, false );

快速回弹滚动

快速回弹滚动在手机浏览器上的发展历史：

1.早期的时候，移动端的浏览器都不支持非 body 元素的滚动条，所以一般都借助 iScroll;

2.Android 3.0 / iOS 解决了非 body 元素的滚动问题，但滚动条不可见，同时 iOS 上只能通过2个手指进行滚动；

3.Android 4.0 解决了滚动条不可见及增加了快速回弹滚动效果，不过随后这个特性又被移除；

4.iOS从5.0开始解决了滚动条不可见及增加了快速回弹滚动效果

如果想要为某个元素拥有 Native 般的滚动效果，可以这样操作：

.element {
    overflow: auto; /* auto | scroll */
    -webkit-overflow-scrolling: touch;
}
除了 iScroll 之外，还有一个更加强大的滚动插件 Swiper，支持 3D 和内置滚动条等。

设备检测

// 这段代码引用自：https://github.com/binnng/device.js

var WIN = window;
var LOC = WIN["location"];
var NA = WIN.navigator;
var UA = NA.userAgent.toLowerCase();

function test(needle) {
  return needle.test(UA);
}

var IsTouch = "ontouchend" in WIN;
var IsAndroid = test(/android|htc/) || /linux/i.test(NA.platform + "");
var IsIPad = !IsAndroid && test(/ipad/);
var IsIPhone = !IsAndroid && test(/ipod|iphone/);
var IsIOS = IsIPad || IsIPhone;
var IsWinPhone = test(/windows phone/);
var IsWebapp = !!NA["standalone"];
var IsXiaoMi = IsAndroid && test(/mi\s+/);
var IsUC = test(/ucbrowser/);
var IsWeixin = test(/micromessenger/);
var IsBaiduBrowser = test(/baidubrowser/);
var IsChrome = !!WIN["chrome"];
var IsBaiduBox = test(/baiduboxapp/);
var IsPC = !IsAndroid && !IsIOS && !IsWinPhone;
var IsHTC = IsAndroid && test(/htc\s+/);
var IsBaiduWallet = test(/baiduwallet/);

获取滚动条值

PC 端滚动条的值是通过 document.scrollTop 和 document.scrollLeft

window.scrollYwindow.scrollX

Défilement à rebond rapide

Historique du développement du défilement à rebond rapide sur les navigateurs mobiles :

1 Au début, les navigateurs mobiles ne prenaient pas en charge les barres de défilement pour les éléments non corporels, donc iScroll était généralement utilisé 🎜🎜2. . Android 3.0 / iOS résout le problème de défilement des éléments non corporels, mais la barre de défilement est invisible. En même temps, le défilement ne peut être effectué qu'avec 2 doigts sur iOS 🎜🎜3. et ajoute un effet de défilement à rebond rapide, mais cette fonctionnalité a ensuite été supprimée 🎜🎜4 À partir d'iOS 5.0, la barre de défilement est invisible et un effet de défilement à rebond rapide est ajouté 🎜🎜Si vous souhaitez avoir un effet de défilement de type natif ; pour un élément L'effet de défilement peut être utilisé comme ceci : 🎜

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

🎜Détection de périphérique🎜

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

🎜Obtenir la valeur de la barre de défilement🎜🎜La valeur de la barre de défilement latérale du PC passe par document.scrollTop et document.scrollLeft Obtenu, mais il n'y a pas de concept de barre de défilement dans iOS, elle ne peut donc être obtenue que via windows.scroll, et elle est également compatible avec Android. 🎜

<!-- 关闭电话号码识别： -->
<meta name="format-detection" content="telephone=no" />

<!-- 开启电话功能： -->
<a href="tel:123456">123456</a>

<!-- 开启短信功能： -->
<a href="sms:123456">123456</a>

🎜Effacez l'ombre intérieure de la zone de saisie🎜🎜Sur iOS, la zone de saisie a une ombre intérieure par défaut, mais elle ne peut pas être effacée à l'aide de box-shadow. Si vous n'avez pas besoin d'ombre, vous pouvez faire ceci : 🎜.

<!-- 关闭邮箱地址识别： -->
<meta name="format-detection" content="email=no" />

<!-- 开启邮件发送： -->
<a mailto:>mobile@gmail.com">mobile@gmail.com</a>

Lié aux méta

La fenêtre de la page s'ajuste automatiquement à la largeur de l'appareil et empêche l'utilisateur de zoomer sur la page

<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 可选default、black、black-translucent -->

Reconnaissance du numéro de téléphone

iOS Safari (Android ou d'autres navigateurs ne le font pas) reconnaîtra automatiquement les numéros qui ressemblent à des numéros de téléphone et will Il est traité comme un lien de numéro de téléphone, par exemple :

7 chiffres, sous la forme de : 1234567
Chiffres entre parenthèses et signes plus, sous la forme de : (+86)123456789
Lignes doubles connectées , sous la forme de : 00 -00-00111
11 chiffres, comme : 13800138000

rrreee

Identification des adresses email

Sur Android (pas iOS), le navigateur reconnaîtra automatiquement une chaîne qui ressemble à une adresse email, que vous soyez ou non. Il n'y a pas de lien de courrier électronique Lorsque vous appuyez et maintenez cette chaîne, une invite pour envoyer un e-mail apparaîtra.

rrreee

Spécifiez le style de la barre d'état supérieure de Safari sur iOS

rrreee

Optimisation mobile