WEB-Mobile 300ms Latency

How does the 300 millisecond delay on the mobile side come about, and how to solve it?

Full version: Http://www.linovo.me/front/webapp-300ms.html

Simple version: http://www.xiaomeiti.com/note/3585

Word, is originally only mobile phone provides a double-click to enlarge/then double-click the function of narrowing, then how to judge double-click it? That is the point of the first, and then wait 300ms, in this 300ms if there is a click, is double-click, otherwise what to do. But this raises the question is if a link, in the case of a user click once, to wait 300ms and then jump, the user will feel this page is very card (actually delay 100ms users can obviously feel. So we have to solve this problem.

One, prohibit scaling

The source of the problem is the page scaling problem, so there's this in the solution. Disable Scaling

<name= "Viewport"  content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0 "/>

General Mobile Development will add this tag, directly prohibit the page zoom, everything!

Second, set the viewport device-width (Chrome 32+)

In Chrome 32+, if you set the width of the viewport to be less than or equal to the width of the physical device, the effect of disabling scaling is also reached.

<name= "Viewport"  content= "Width=device-width, initial-scale=1, Minimum-scale=1, maximum-scale=3 ">

Note: Not the same as above

Iii. using pointer events (ie10+)

There are many pointer events to solve this problem with this:

{    -ms-touch-action: manipulation/*   IE10*     / Touch-action: manipulation;     /* */}

Iv. Tappy.js

https://github.com/filamentgroup/tappy/

There are issues such as a point-through (the Click event of the above element will be received by the following element, or it can be resolved).

Small, only about 1kb, requires jquery or a framework that provides a similar excuse.

function (e) {   "tap!"

Wu, Fastclick.js

Https://github.com/ftlabs/fastclick

Very popular, very useful.

Acoustic use:

if inch document) {    Document.addeventlistener(function() {        Fastclick.attach (document.body);     false );}

There is a jquery library

$ (function() {    Fastclick.attach (document.body);});

Features that support AMD mode loading.

WEB-Mobile 300ms Latency