Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "what points should Mobile html5 pay attention to in webview". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Note: 1, click, mouseup and other mouse events will have a 200ms delay, you can use touch events to reference Quo.js events; 2, incompatible css3 ": active" attribute, need to be configured; 3, only support html,body scrolling, need to be compatible with processing, and so on.

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

In mobile devices, especially in smartphones such as touch screens, the embedded browser-webview displays html pages, so there are some things to pay attention to in the development of html pages, including the following:

1. In webview, there is a 200ms delay for mouse events such as click,mouseup,mousedown. It is recommended to use the touch event. If it is convenient, please refer to the Quo.js event (size is 3KB) to meet the fast click effect.

2. If the active attribute of css3 is not compatible with webview, you need to add class to active for touchstart and touchend events, and add .active to css.

3. Currently, webview in android only supports scrolling of html,body. For other elements such as div, div cannot be scrolled even by using overflow:scroll, so it needs to be handled with compatibility.

There are two ways to deal with it:

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

Second, simulate the scrolling effect by listening to the touch and drag events of DIV elements. For more information, please see noBarsOnTouchScreen.js

4. To develop a web page in webview, to achieve an effect similar to app, especially the conversion of pages from different modules on the same page, in order to make the effect more similar to the local application, a plug-in pagetransitions.js is recommended here (see attachment pagetransitions.zip).

It is through the css3 animation to make each page smooth conversion, allowing in the same page, through a variety of animation effects conversion.

This is the end of the content of "what do you need to pay attention to in the webview of Mobile html5"? thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.