What should you pay attention to when using mobile html5 in webview?

Things to note: 1. Mouse events such as click and mouseup will have a 200 millisecond delay. You can use touch events to reference Quo.js events; 2. It is not compatible with the ":active" attribute of css3 and needs to be modified. Configuration; 3. Only supports scrolling of html and body, and needs to be processed for compatibility, etc.

The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.

In mobile devices, especially touch screen and other smart phones, the embedded browser-webview needs to display html pages. Therefore, there are some things that need to be paid attention to when developing html pages, which are probably the following. Point:

1. In webview, there will be a 200 millisecond delay for mouse events such as click, mouseup, mousedown, etc. It is recommended to use touch events. If convenient, please quote Quo.js events (size 3KB) , to meet the quick click effect;

2. The :active attribute of CSS3 is not compatible with webview. You need to add class active to touchstart and touchend events, and add .active in css.

3. Currently Webview in Android only supports scrolling of html and body. For other div and other elements, even using overflow:scroll cannot make the div scrollable, so this needs to be compatible.

There are two processing methods:

The first is to use the iscroll.js plug-in, but the plug-in will automatically block all default events, so use it with caution;

Second, simulate the scrolling effect by monitoring the touch and drag events of the DIV element. For specific methods, see noBarsOnTouchScreen.js

4. Develop web pages in webview to achieve an app-like effect. , especially the conversion of pages in different modules of the same web page, in order to make the effect closer to that of local applications, a plug-in pagetransitions.js is recommended here (see attachment pagetransitions.zip).

It uses css3 animation to allow smooth conversion of each page, allowing the same web page to be converted through various animation effects.

Related recommendations: "html video tutorial"

The above is the detailed content of What should you pay attention to when using mobile html5 in webview?. For more information, please follow other related articles on the PHP Chinese website!