[IOS] highlights of native-like webapp Creation

When you tap a page element, iOS displays an orange outer box around the element to indicate that the element has been tapped. If you want to achieve the effect of the response when you tap, you can use the following method to "Remove" the highlight effect. (Source)

-Webkit-tap-highlight-color: rgba (0, 0, 0 );

Prohibit the user from selecting text on the page: (source)

-Webkit-user-select: none;

If you respond to the onclick event, you will find that the click event has a latency of about half a second, because iOS needs to wait for a while to determine whether the user clicks or drags. To remove this latency, you can useOntouchstartReplaceOnclick(Source)

$ (". Button"). bind ("touchstart", handler );

But in this way, you can click the mouse in the desktop browser to stop using it. It doesn't matter. You can make a judgment.

If ('ontouchstart' in window) {// mobile version $ (". button "). bind ("touchstart", handler);} else {// desktop version $ (". button "). bind ("click", handler );}

Prohibit users from dragging pages: (source)

Document. ontouchstart = function (e) {e. preventDefault ();}

Some Other information: here