Overview of Mobile Web Development Specifications

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 previous iOS versions are downgraded to Helvetica. The Chinese font is set to Huawen Bold STHeiTi. It should be noted that Huawen Bold does not exist in the iOS font library (http://support.apple.com/kb/HT5878), but the system will automatically make Huawen Bold STHeiTi compatible*** The system default Chinese font is Bold-Simplified or Bold-Traditional

 Heiti SC Light Bold-Simplified Thin ( discarded after iOS 7 )
 Heiti SC Medium Bold-Simplified Medium Black
 Heiti TC Light Bold-Traditional Thin
 Heiti TC Medium Bold-Traditional Medium Black

In native Android, both Chinese and English fonts are set to the default sans serif font.

 For versions prior to 4.0, the native Android font for English uses Droid Sans, and the native Android font for Chinese will use Droid Sans Fallback.
 After 4.0 , both Chinese and English fonts will use the native Android new Roboto font
 Other third-party Android systems also consistently choose sans serif fonts as default

Basic Interaction

Set the global CSS style to avoid the behavior of long-pressing the pop-up menu and selecting text in the figure

 a, img {
 -webkit-touch-callout: none; /* Disable long press on links and images to pop up menus */  
 }
 html, body {
 -webkit-user-select: none; /* Disable text selection (this is a must if no text selection is required) */  
 user-select: none;
 }

Mobile performance

Pay attention to the performance of low-end Android devices and 2G network scenarios !

Necessary checks before publishing

• All images must be compressed
• Consider moderate lossy compression, such as converting to jpg images with 80% quality
• Consider splitting a large image into multiple smaller images, which is common when the banner image is too large.

Loading performance optimization to achieve fast opening

• Data offline, consider caching data in localStorage
• Initial requested resource number < 4 Note!
• Images using CSS Sprites or DataURI
• Avoid @import in external CSS
• Consider embedding small static resources
• The total size of the initial request resource after gzip is < 50kb
• Are static resources (HTML/CSS/JS/Image) optimized and compressed?
• Avoid packaging large libraries
• Make sure Gzip compression is enabled at the access layer (consider increasing the Gzip level and using CPU overhead in exchange for loading time) Note!
• Try to use CSS3 instead of images
• Note: Lazy loading of static resources (JS/CSS) outside the initial first screen!
• Image resources outside the initial first screen are loaded on demand (determine the visible area) Note!
• Single-page application (SPA) considers delaying the loading of non-first-screen business modules
• Enable Keep-Alive link reuse

Optimize operating performance to achieve smooth operation

• Be careful to avoid iOS 300+ms click delay issue!
• Caching DOM selections and calculations
• Avoid actions that trigger page redrawing
• Debounce continuously triggered events (scroll / resize / touchmove, etc.), avoid high-frequency triggering execution . Note!
• Use event delegation whenever possible to avoid batch binding of events
• Use CSS3 animation instead of JS animation
• Avoid using a lot of CSS3 gradient shadow effects on low-end machines. Consider downgrading the effects to improve fluency.
• Keep the HTML structure simple
• Use CSS advanced selectors and wildcard selectors as little as possible
• Keep it simple

Online Performance Testing and Evaluation Tool User Guide

• Visit the Google PageSpeed ​​online rating site
• Enter the target URL in the address bar and click the Analyze button to start detection.
• Optimize according to the recommendations of PageSpeed ​​analysis, and prioritize solving problems in red categories