Mobile optimization

The 300ms delayed response of click

The 300ms delayed response of click is caused by double tap to zoom. Since the user can double-click to zoom or double-click to scroll, when the user clicks the screen once, the browser cannot immediately determine whether the user really wants to open the link or double-click. Therefore, the mobile browser waits 300 milliseconds to determine whether the user clicks the screen again.

With the increasing number of responsive web pages, users have fewer opportunities to use double-click to zoom, and this 300ms delay is even more unacceptable. Browser developers also provide corresponding solutions. These solutions are mentioned in 5 Ways to Prevent the 300ms Click Delay on Mobile Devices, including "disable scaling" and "width=device-width", but these solutions are not perfect and need For certain versions of browsers, or only available on Android browsers.

So a simpler and more general solution is needed at this time, among which FT Labs is a lightweight library developed specifically to solve the 300 millisecond click delay problem of mobile browsers FastClick is a good choice. When FastClick detects a touchend event, it will immediately trigger a simulated click event through a DOM custom event, and block the click event that is actually triggered by the browser after 300 milliseconds.

FastClick is very simple to use. After the window load event, call FastClick.attach() on <body>.

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

Fast rebound scrolling

The development history of fast rebound scrolling on mobile browsers:

1. In the early days, mobile browsers did not support non- The scroll bar of the body element, so iScroll is generally used;

2. Android 3.0 / iOS solves the scrolling problem of non-body elements, but the scroll bar is not visible, and at the same time, scrolling can only be done with 2 fingers on iOS ;

3. Android 4.0 solved the problem of invisible scroll bars and added a quick rebound scrolling effect, but then this feature was removed;

4. iOS solved the problem of scrolling starting from 5.0 The bar is invisible and the fast rebound scrolling effect is added

If you want to have a Native-like scrolling effect for a certain element, you can do this:

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

Device detection

// 这段代码引用自：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/);

Get the scroll bar value

The value of the PC side scroll bar is obtained through document.scrollTop and document.scrollLeft, but there is no concept of scroll bar in iOS , so it can only be obtained through windows.scroll, and is also compatible with Android.

window.scrollYwindow.scrollX

Clear the inner shadow of the input box

On iOS, the input box has an inner shadow by default, but it cannot be cleared using box-shadow. If you do not need a shadow, you can do this:

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

Meta related

The page window automatically adjusts to the device width and prevents the user from zooming the page

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

Phone number recognition

iOS Safari (Android or other browsers do not Yes) will automatically recognize numbers that look like phone numbers and process them into phone number links, such as:

7 digits, in the form: 1234567
with brackets and additions The number of the number, in the form of: (+86)123456789
The number of the double connection line, in the form of: 00-00-00111
11 digits, in the form of: 13800138000

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

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

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

Identification of email addresses

On Android (not iOS), the browser will automatically recognize a string that looks like an email address, regardless of whether you have added an email link. When you Long press on this string, and a prompt to send an email will pop up.

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

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

Specify the style of the top status bar of Safari on iOS

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

Mobile optimization