Summarize WebApp common front-end errors in XX Web App.

During the one-month period from December 2016 to January 2017, I was involved in the WebApp front-end project in the easy Internet app, which summarizes the mistakes I made in this project in case of another.

Watch out.

One: Reuse

Reusable places must be reused, or later change the style will be exhausted ...

Second: Prevent class name conflicts

Write the class name when it is best to add a prefix, or in the late may have a CSS file merge, then there is a class name conflict is embarrassing ...

Three: External chain import

JS and CSS files are best used outside the chain to import, if the direct in the HTML is not good to see, (if some of the styles are not used, JSP will be an error).

Four: with the standard

Project standards must be unified well, do not make their own, follow the standard.

Five:tap

Forget click in WebApp, use tap event. The tap event is best triggered with a JS object.

VI: scroll bar

Some phones (Xiaomi 4) will display your Overflow:auto scroll bar, even if your page content does not exceed the width of the container will be displayed, so you do not need to scroll the place do not add this property!!!

Seven: native JS

It is best to use Js,webapp to rely heavily on traffic, preferably not with jquery and other libraries.

BUG

One: font size and spacing issues

First, import the following code. This code is already iphone6 the resolution of the production, debugging when the page image produced by the resolution to adjust. Use rem!! for both font size and spacing

(Function (doc, win) {var docel = doc.documentelement,resizeevt = ' orientationchange ' in window? ' Orientationchange ': ' resize ', Recalc = function () {var clientwidth = docel.clientwidth;if (!clientwidth) return;if (Clie ntwidth>=768) {docEl.style.fontSize = (768/375) + ' px ';} else{docel.style.fontsize = * (clientwidth/375) + ' px ';}}; if (!doc.addeventlistener) Return;win.addeventlistener (Resizeevt, Recalc, False);d Oc.addeventlistener (' Domcontentloaded ', Recalc, False);}) (document, window);

Two: The problem of line change

Some articles or header data on the page may not be wrapped on their own and need to add white-space:normal; Force line wrapping. In order to prevent the end of each line will have words, need to add word-break:break-all;

Three:iOS and Android native issues

iOS and Android can disable resizing for large fonts, and iOS may turn a string of numbers on a page to a phone or URL and change the style, which can be disabled. iOS and Android have different styles like H5 controls, preferably with a unified style plug-in.

Four: background insert article question

Articles inserted in the background may have their own styles, or they may not be inserted into your element, which you need to be aware of.

MUI's Pit

One:mui.back incident Problem

It is best not to use Mui-action-back, which is just a normal return and does not refresh the page.

WORKAROUND: 1: Rewrite mui.back=function, see MUI documentation for details

2: Give an ID binding event, but do not add mui-action-back to this class name.

3: Remember to add the Window.androidback event, you need to trigger the return event at the bottom of the screen in the Android phone.

Summarize WebApp common front-end errors in XX Web App.