Front End Development Summary (mobile article)

Note: There is an error in the interface of the chrome analog phone display, it is strongly recommended that you test your mobile page on the real machine.

1. Page height rendering error, whether the height of the page contains navigation, (Huawei Mobile Phone is the bottom menu)

Set window Height document.documentElement.style.height = window.innerheight + ' px ';

2. The mobile side background map Zoom fixed.

With a fixed layout, the Zoom property is 1.

3. The text line is not aligned on the high side.

Set Line-height to normal. Do not write dead line high values.

Compatibility issues with iphone:

1.:active Pseudo class does not take effect

Block Touchstart default events. (if there is no need for any gesture events, it is best to disable all gesture events)

2.input= "Search" cannot trigger Input method.

Requires <form> tags to be wrapped up to trigger.

3. Disable long-press events.

Use caution with User-select:none; attributes will cause the iphone cannot be entered.

4.webview rebound effect.

Disabling the Touchmove event is recommended if the page is full screen and does not exceed the visible height.

Do not disable the Touchmove event if the page is not full-screen and exceeds the visible height.

PS: Although there are ways to block the X5 kernel (QQ browser kernel) "Web page has xxx" This information, but does not really block the iphone rebound effect. Drag or bounce back.

Front End Development Summary (mobile article)