Mobile phone website Development Code excerpt

Mobile Web development is already the mainstream of web technology, in fact, compared to the PC side, we do not need to master the additional technology, but many things on the PC does not apply to the mobile phone web, mobile Web side we must know the special point, the following is my excerpt from the Alloyteam team development experience.
Font settings
Use sans serif fonts

The code is as follows	Copy Code
Body { font-family: "Helvetica neue", Helvetica, Stheiti, Sans-serif; }

iOS 4.0+ uses the English font Helvetica Neue, prior to the iOS version demotion using Helvetica. Chinese font is set to XXFarEastFont-Arial Stheiti. Need to add that the XXFarEastFont-Arial Font library (http://support.apple.com/kb/HT5878) does not exist, but the system will automatically stheiti compatible with the hit system default Chinese font bold-simple or bold-complex.

Heiti SC Light blackbody-Jencine (obsolete after IOS 7)
Heiti SC Medium blackbody-Simplified Chinese Black
Heiti TC Light blackbody-Fine body
Heiti TC Medium blackbody-Medium black

Native Android Chinese fonts and English fonts both choose the default sans serif font.
Prior to the 4.0 version of English fonts native Android uses the droid Sans, Chinese fonts native Android will hit the droid Sans fallback
After 4.0, Chinese and English fonts will use native Android's new Roboto font
Other Third-party Android Systems also consistently select the default sans serif font.
Basic interaction
Set the global CSS style to avoid the long press pop-up menu and selected text behavior in the diagram.

code is as follows	copy code
a, img { & nbsp;  -webkit-touch-callout:none; /* Prohibit long press link and picture pop-up menu * * } html, body {    -webkit-user-select:none;  /* Prohibit text (if no text Select the requirements, this is required) */     user-select:none; }

code is as follows	copy code

Mobile Performance
to consider the Android low-end machine and 2G network scenario performance!
necessary to check before publishing:
All pictures must have been compressed
Consider moderate lossy compression, such as a JPG image converted to 80% quality
Consider cutting large images into more than one small picture, common in the banner diagram too large scene
Load performance optimization, to open fast enough.
Data is offline, consider caching data in Localstorage
Initial request Resources < 4
Picture using CSS sprites or Datauri
outside the chain CSS to avoid @import introduction
Consider embedding small static funding is the source content
Initial Request Resource gzip Total Volume < 50kb
Static resource (Html/css/js/image) optimized for compression?
Avoid packaging large class libraries
ensure that the access layer is enabled for GZIP compression (consider raising the gzip level, using CPU overhead in exchange for load time)
try to use CSS3 instead of picture
Static resource (JS/CSS) delay loading outside the initial screen
Image resources outside the initial screen to load on demand (judging viewable area)
Single page application (SPA) Consider delay loading non-first screen business module
Open keep-alive link multiplexing
Run performance optimization, achieve smooth operation
to avoid IOS 300+ms click Latency
Cache DOM Selection and calculation
Avoid triggering page redraw actions
debounce consecutive events (Scroll/resize/touchmove, etc.), avoid high frequent trigger execution
use event proxies whenever possible, avoid batch binding events
Use CSS3 animation instead of JS animation
to avoid using a large number of CSS3 gradient shadow effects on low-end machines, consider a downgrade effect to increase fluency
HTML hierarchy remains simple enough
use CSS advanced selector and wildcard selector
Keep it Simple