Mobile web development specifications in detail

The following specification suggestions are all based on the experience summarized and refined by Alloyteam in the daily development process. The specification has good project practices and is highly recommended.

Font settings

Use sans serif font

body { font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; }

iOS 4.0+ uses the English font Helvetica Neue, and previous iOS versions downgraded to use Helvetica. The Chinese font is set to Chinese bold STHeiTi. It is necessary to add that Chinese Heilong does not exist in the font library of iOS, but the system will automatically match Chinese Heilong STHeiTi compatible hit system default Chinese font Heihe-Simplified or Heihe-Traditional

Heiti SC Light 黑体-简 细体 Heiti SC Medium 黑体-简 中黑 Heiti TC Light 黑体-繁 细体 Heiti TC Medium 黑体-繁 中黑

Both Chinese fonts and English fonts under native Android are selected as the default Sans serif font

4.0 之前版本英文字体原生 Android 使用的是 Droid Sans，中文字体原生 Android 会命中 Droid Sans Fallback 4.0 之后中英文字体都会使用原生 Android 新的 Roboto 字体 其他第三方 Android 系统也一致选择默认的无衬线字体

Basic interaction

Set the global CSS style to avoid the long press pop-up menu and selected text behavior in the picture

a, img { -webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */ } html, body { -webkit-user-select: none; /* 禁止选中文本（如无文本选中需求，此为必选项） */ user-select: none; }

Mobile performance

Consider the performance of Android low-end machines and 2G network scenarios

Necessary checks before publishing

All images must have been compressed

Consider moderate lossy compression, such as converting to 80% quality jpg images

Consider cutting the large image into multiple small images, which is common when the banner image is too large Scenario

Loading performance is optimized to open fast enough

data is offline, consider caching the data in localStorage

Number of initial requested resources < 4 Attention!

Use CSS Sprites or DATAURI for images

Avoid @import introduction in external link CSS

Consider embedding small static resource content

Total volume after initial request for resource gzip

Static resources (HTML/CSS/JS /IMAGE) optimize compression?

Avoid packaging large class libraries

Make sure Gzip compression is turned on at the access layer

Use CSS3 instead of images as much as possible

Image resources outside the initial first screen need to be delayed loading Attention!

Single page applications (SPA) consider delaying loading of non-first-screen business modules

Optimization of running performance to achieve smooth enough operation

Avoid iOS 300+ms click delay problem Attention!

Cache DOM selection and calculation

Avoid operations that trigger page redrawing

Debounce continuously triggered events (scroll/resize) to avoid high-frequency triggered execution

Use event proxies as much as possible to avoid batch binding of events

Use CSS3 animation replaces JS animation

Avoid using a lot of CSS3 gradient shadow effects on low-end machines, consider downgrading effects to improve fluency

Keep the HTML structure level simple enough, no more than 5 levels are recommended

Use CSS as little as possible Advanced selector and wildcard selector

Keep it simple

Guide to use of online performance testing and evaluation tools

Visit the Google PageSpeed ​​online evaluation website

Enter the target URL address in the address bar and click the analyze button to start testing

Press PageSpeed ​​Analysis Optimize the suggestions given and give priority to solving the problems in the red category