Mobile Web Development Specification Details

The following specifications are recommended, are alloyteam in the daily development process to summarize the experience, the specification has a good project practice, strongly recommended to use.

Font settings

Use sans serif fonts

Body {font-family: "Helvetica Neue", Helvetica, Stheiti, Sans-serif;}

iOS 4.0+ uses the English font Helvetica Neue, before the iOS version is degraded using Helvetica. The Chinese font is set to Chinese blackbody stheiti. It is necessary to add that the Chinese blackbody does not exist in the font library of iOS, but the system will automatically hit the Chinese blackbody Stheiti compatible with the system default English font blackbody-Jane or blackbody-complex

Heiti SC Light blackbody-Jencine Heiti sc Medium blackbody-Simplified Chinese black heiti tc Light blackbody-Complex fine Heiti tc Medium blackbody-Black

Native Android Chinese fonts and English fonts are selected by default sans serif font

4.0 before version English font native Android uses the droid Sans, Chinese font native Android will hit droid Sans Fallback 4.0 after the English and Chinese fonts will use native Android new Roboto fonts other third parties The Android system also selects the default Sans serif font in the same line

Basic interaction

Set the global CSS style to avoid long pressing of the pop-up menu and the selected text in the diagram

A, img {-webkit-touch-callout:none;/* Prohibit long press link and picture pop-up menu */} html, body {-webkit-user-select:none;/* Prohibit text selection (if no text is selected, this is required option) */User-select:none; }

Mobile Performance

To consider the performance of Android low-end and 2G network scenarios

Required checks before publishing

All pictures must have been compressed

Consider moderate lossy compression, such as JPG images converted to 80% quality

Consider cutting large images into multiple small plots, which are common in banner plots.

Load performance optimization to open fast enough

Data offline, consider caching data in Localstorage

Initial Request Resource Count < 4 Note!

Images using CSS Sprites or Datauri

Avoid @import introduction in the outer chain CSS

Consider embedding small, static resource content

Initial request Resource Gzip Total Volume < 50kb

is static resource (Html/css/js/image) optimized for compression?

Avoid packaging large class libraries

Make sure the access layer is turned on gzip compression

Try to use CSS3 instead of pictures

Image resources outside the initial splash screen need to be delayed loading note!

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

Operational performance optimization to achieve smooth enough operation

Avoid IOS 300+MS Click Delay issues Note!

Cache DOM Selection and calculation

Avoid triggering page redraw actions

Debounce continuously triggered events (scroll/resize) to avoid high frequent triggering of execution

Avoid bulk-bound events by using event proxies whenever possible

Use CSS3 animations instead of JS animations

Avoid using a large number of CSS3 gradient shadows on low-end machines to improve fluency by considering the downgrade effect

HTML hierarchy remains simple enough to recommend no more than 5 levels

Use the CSS Advanced selector and the wildcard selector as little as possible

Keep it simple

Online Performance Testing Assessment Tool User Guide

Visit the Google pagespeed Online assessment website

Enter the destination URL address in the Address bar and click the Analyze button to start detection

Optimization by pagespeed Analysis of recommendations, priority to solve the problem of red category

