The following specification recommendations are all experience summarized and refined by Alloyteam during daily development. These specifications have proven effective in real projects and are strongly recommended.

Font Settings

Use sans-serif fonts

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

iOS 4.0+ uses the English font Helvetica Neue, and earlier iOS versions fall back to Helvetica. The Chinese font is set to STHeiTi. It should be noted that STHeiTi does not exist in the iOS font library (http://support.apple.com/kb/HT5484?viewlocale=en_US), but the system will automatically match STHeiTi to the system default Chinese font, Heiti Simplified or Heiti Traditional.

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

On native Android, both Chinese and English fonts should use the default sans-serif font.

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

Basic Interaction

Set global CSS styles to avoid the long-press pop-up menu and text selection behavior shown in the figure.

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

Mobile Performance

Consider performance on low-end Android devices and 2G network scenarios.

Required checks before release

• All images must be compressed.
• Consider moderate lossy compression, such as converting to JPEG images at 80% quality.
• Consider slicing large images into multiple smaller images, commonly in scenarios where the banner image is too large.

Optimize loading performance to achieve fast enough opening.

• Offline data: consider caching data in localStorage.
• Number of initial request resources< 4 ^Note!
• Use CSS Sprites or DATAURI for images.
• Avoid using @import in external CSS.
• Consider inlining small static resource content.
• Total size of initial requested resources after gzip< 50kb
• Are static resources (HTML/CSS/JS/IMAGE) optimized and compressed?
• Avoid bundling large libraries.
• Ensure that Gzip compression is enabled at the access layer.
• Use CSS3 instead of images where possible.
• Image resources outside the initial first screen need to be lazily loaded.^Note!
• For single-page applications (SPA), consider lazy-loading business modules not on the first screen.

Optimize runtime performance to achieve smooth operations.

• Avoid the iOS 300+ms click delay issue.^Note!
• Cache DOM selections and calculations.
• Avoid operations that trigger page repaints.
• Debounce continuously triggered events (scroll/resize) to avoid high-frequency execution.
• Use event delegation as much as possible to avoid batch binding of events.
• Use CSS3 animations instead of JS animations.
• Avoid using a large number of CSS3 gradients and shadow effects on low-end devices; consider degraded effects to improve smoothness.
• Keep the HTML structure hierarchy simple enough; it is recommended not to exceed 5 levels.
• Use CSS advanced selectors and universal selectors as little as possible.
• Keep it simple

Guide to using the online performance testing and evaluation tool

• VisitGoogle PageSpeedOnline evaluation website
• Enter the target URL address in the address bar, click the Analyze button to start testing.
• Optimize according to the suggestions analyzed by PageSpeed, and prioritize solving issues in the red category.

Source: http://www.zjgsq.com/1339.html