Summary of HTML5 problems in mobile terminal

1, what technical problems are encountered during development

1) Low version phone does not support ES6, use Babel

2) The introduction of Baidu Map JS API, you need to use the HTTPS protocol, otherwise the API can not be used normally. In iOS 10, Apple has modified the WebKit location permission, and the page for all location requests must be the HTTPS protocol

3) <meta name= "viewport" content= "Width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, User-scalable=no ">

forces the width of the document to remain at 1:1 of the width of the device, and the maximum width of the document is 1.0, and does not allow the user to click on the screen to zoom in; The page does not enlarge when the input gets focus

4) in the public number, when input gets the focus, the top of the page will prompt "fraud theft, do not pay or enter the QQ password." Set up business domain name in the management background of public platform to solve

5) <form action= "#" @submit = "Dosearch" ><input type= "Search"/></form>

Click the Keyboard Search button to trigger the form's Submit event E.preventdefault ();//block form default Event

in the lower right corner of the keyboard on the mobile side , the "search" (Android) or the ' Search ' button is displayed and the form can be submitted by clicking on the button.

6) page List pull-up load, achieve paging, shorten the request time

Listen to the page scrolling events, determine the distance from the bottom of the scroll bar, and then reach a certain value, to the service side to send a request. By stitching the results of the request behind the original list, you can implement pull-up paging.

7) Mobile HTML5 drag-and-drop

When the finger is pressed, the Ontouchstart is triggered, and when the finger is moved, the Ontouchmove is triggered continuously (during this event, the call to the Preventdefault () event can prevent scrolling), and when the finger is removed, Trigger Ontouchend.

The onclick is only executed if you click and release quickly, and if you click on an area and release it too late, the onclick will not be executed (touchstart->...->touchend)

Execution order is Ontouchstart > Ontouchend > OnClick

Personal point of view: Mobile can not use HTML5 drag and drop to achieve drag effect (ondragstart ... ), you can use the touch event

8) page scrolling is not smooth on iOS

-webkit-overflow-scrolling:touch;

9) Flashing background picture on iOS (cause temporarily unknown)

var cvs = document.createelement (' canvas ');
Cvs.width = 5; Cvs.height = 2;cvs.todataurl ();
This sentence is put in the browser to execute, the Base64 string is drawn.

2, mobile end to improve user experience

1) Shorten the request time by loading the paging in the pull-up

2) Reduce waiting, feedback timely

When loading and waiting are unavoidable, timely feedback is needed to soothe the undesirable emotions that the user waits for. such as: to send a request to the server to display the "Load in" bullet box, the request to complete the closing of the box, when the requested data is empty, prompt query on the page no records, etc., to avoid a blank page, let users think the application card dead.

3) Clear and intuitive result hints, such as error

In addition to timely feedback in the user's waiting process, the results of the operation need to be given explicit feedback. Pop-up hints (toasts) apply to lightweight success hints, disappear automatically after 1.5 seconds, do not interrupt the process, have less impact on users, and are suitable for action reminders that do not need to be emphasized, such as success hints. Note that this form does not apply to error prompts, because the error message is explicitly communicated to the user and is therefore not suitable for a flashing pop-up hint. If the result of the operation is already the end of the current process, you can use the action results page to feedback. This is the most intense and explicit way to inform the user that the operation has been completed and to give guidance on what to do next.

4) Reduce the number of HTTP resource requests & reduce the size of the HTTP request

use build tools such as Webpack to merge JavaScript or CSS code, compress static picture resources, and remove comments from code and compress them;

5) Place CSS resource references at the top of the HTML file, and JavaScript resource references at the bottom of the HTML file

It is generally recommended that all CSS resources are specified early in the HTML document

JavaScript resources are placed at the bottom of the HTML document to prevent JavaScript loading and parsing execution from blocking page rendering. Because JavaScript resources default to parsing blocking, HTML DOM parsing and CSS rendering are blocked unless they are marked as asynchronous or loaded in other asynchronous ways.

6) relative to the desktop browser, There are some obvious features on the mobile Web browser: Small device screen, good compatibility with new features, support for some newer HTML5 and CSS3 features, need to interact with Native applications, etc. But mobile browsers have a very limited amount of CPU computing and network resources available, so it's often necessary to do more to optimize the mobile Web. First, in the front-end page rendering of the mobile Web, the optimization rules on the desktop browser are equally applicable, and some extreme optimizations are made for the mobile side to achieve better results.

7) First screen loading and loading on demand, non-first screen content scrolling loading, to ensure the first screen content minimized

because the mobile network speed is relatively slow, network resources are limited, so in order to complete the loading of page content as soon as possible, need to ensure that the first screen loading resources minimized, non-first screen content using scrolling asynchronous loading. Generally recommended mobile page first screen data display delay maximum of 3 seconds.

8) Image Compression processing

On the mobile side, it is generally important to ensure that all images used in the page are compressed and optimized, rather than being used directly in the original image, because that consumes traffic and takes longer to load.

9) Use Touchstart instead of click

due to the design of the mobile screen, there is a 300 millisecond delay between the Touchstart event and the Click event Trigger time, so the Touchstart event can be used instead of the CLI of the element in cases where touchmove scrolling is not implemented in the page CK events to speed up the response of page clicks and improve the user experience. But at the same time we should also pay attention to the page overlap element touch Action Click-through problem.

Summary of HTML5 problems in mobile terminal