click events 200 ~ 300ms latency issues
Since the mobile terminal default layout viewport width is 980 pixels, the text on the page is very small, in order to quickly make Web pages restored to its original size, Safari newly introduced double click to zoom functions: user double-clicks the phone page when intelligently browser zoom current page to its original size.
Double-click scaling principle is that when the user click once, the browser will detect whether after about 300ms have another click, if any, will be scaled page. Otherwise it is a click event.
Due to the presence of double click to zoom, click trigger event there will be a delay of about 200 ~ 300ms.
dblclick failure event
Due to the presence of double click to zoom, pc end of dblclick event also ineffective.
Method one: Disable scaling (set in the meta tag) Chorm and Firfox support, Safari too much trouble he had double-tap zoom as well as double-clicking the scroll operation
<meta name = "viewport" content = "user-scalable = no, initial-scale = 1, maximun-scale = 1" />
Page not scalable, so that double-clicking the zoom function does not make sense, then you can disable the default browser Double-click to remove the scaling behavior and click delay of 300ms.
Cons: Must completely disable the zoom to achieve their goals, but under normal circumstances, we hope that through two fingers to zoom
Method two: Change the default viewport width (set in the meta tag) Chorm and Firfox support, Safari too much trouble he had double-tap zoom as well as double-clicking the scroll operation
<meta name = "viewport" content = "width = device-width" />
If you can identify a site is responsive site, then the mobile terminal browser can automatically disable double click to zoom click behavior and remove the delay of 300ms.
Set above the meta tags, the browser may think the site has been optimized for mobile end did fit, no need to double-click operation.
Benefits: not completely disable scaling, but disable the browser's default double-click scaling behavior, but users can still zoom page zoom operation by two fingers.
Method three: css touch-action IE support
touch-action: Specifies the corresponding elements can trigger on user agent (browser) the default behavior.
The set property values for the touch-action: none, it represents operating on that element does not trigger any of the default behavior of the user agent. No need to delay the judgment of 300ms.
Method four: FastClick specifically to address the mobile terminal browser click 300ms latency issues made to open a lightweight library.
Principle: When detected touchend events, custom events will simulate a click event issued by DOM immediately, and the click event sent out to stop after 300ms.
Pictures 3px issue
Reason: mainly because of the vertical alignment of the vertical-align the picture caused by the default value is baseline, the default for this purpose under the picture will be more 3px value.
solution:
1. Set the value of the vertical alignment of the vertical-align the image to bottom, we can solve this problem.
2. The picture display is set to block, and specify the width and height.
3. Set the container where the picture elements and width and height and the same picture.
Click end mobile penetration problem
If a back button location, well within range of a tag with the href attribute to be returned to this page after clicking the back button to quickly switch to the page has a tab page, 300ms after trigger a click event, thereby triggering an unexpected jump a label, this is a typical click penetration problems. In fact, the culprit is a click event tag jump default is triggered, and after the end of the mobile touch event is triggered, will still trigger the click event after 300ms.
Solution:
1. trigger click is to prevent the touch event after event completion.
2. Do not mix touch and click events. Are obviously not binding click events, because to solve 300ms latency issues (except fastclick), they are bound only touch event, click this event will never be triggered.
Note: zepto did not prevent the click event, so the use of tap zepto event will still lead to clicks penetrate problem, you need to manually add e.preventDefault () to stop the click event.