Some things to note about mobile development

1. Use viewport to disable zooming of the page. Usually the user-scalable is set to zero to close the user's behavior on page view scaling.

Complete viewport setting, of course, user-scalable=0, some people also write user-scalable=no, can.

<name= "Viewport" content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, User-scalable=0 ">    

2, some of the Apple phone settings.

<name= "apple-mobile-web-app-capable" content= "Yes">    

If the content is set to yes,web the app will run in full-screen mode, or vice versa. The default value for content is no, which indicates normal display. You can use the read-only property window.navigator.standalone to determine whether a Web page is displayed in full-screen mode.

3, format-detection settings.

<name= "Format-detection" content= "Telephone=no"><name= " Format-detection " content=" Email=no ">          

Format-detection Start or disable the phone number, email address in the auto-identify page.

4, pull the scroll bar up and down, slow

Body {    -webkit-overflow-scrolling: touch;     Overflow-scrolling: Touch;}   

The new properties of android3+ and ios5+ support CSS3 are overflow-scrolling

5. Prohibit copying and selecting text

Element {    -webkit-user-select: none;     -moz-user-select: none; -khtml-user-select: none; user-select: none;}    

Resolve mobile devices to select page text (depending on product needs)

6, long time to press and hold the page flash back

element {    -webkit-touch-callout: none;}

7. The default inner shadow of the input box under iphone and ipad

element{    -webkit-appearance: none;} 

8. Translucent gray Matte when touching elements under iOS and Android

Element {    -webkit-tap-highlight-color:rgba (255,255,255,0)} 

9, active compatibility processing is pseudo-class: Active failure

Method One: Body add Ontouchstart

<Ontouchstart= "">  

Method Two: JS to document BIND Touchstart or Touchend event

<Style>A{Color:#000;}A:active{Color:#fff;}</Style><a herf=foo >bar </a><script>  Document.addeventlistener ( '  Touchstart ",function< Span style= "COLOR: #000000" > () {},false</script>     

10. Animation Definition 3D Hardware acceleration enabled

Element {    -webkit-transform:translate3d (0, 0, 0)    transform:translate3d (0, 0, 0);} 

Note: 3D distortion consumes more memory and power

11.1px Frame of Retina screen

element{    border-width: thin;} 

12. When rotating the screen, the font size adjustment problem

*{   -webkit-text-size-adjust:100%;  } 

13. Top status bar background color

<name= "Apple-mobile-web-app-status-bar-style" content/>   

Description

This meta tag will not work unless you first use apple-mobile-web-app-capable to specify full-screen mode.

If content is set to default, the status bar is displayed correctly. If set to blank, the status bar will have a black background. If set to Blank-translucent, the status bar appears as black translucent. If set to default or blank, the page appears below the status bar, where the status bar occupies the upper part, and the page occupies the lower part, which does not obscure or obscure the other. If set to Blank-translucent, the page fills the screen, where the top of the page is obscured by the status bar (which overrides the 20px height of the page, while the Retina screen for iphone4 and ITOUCH4 is 40px). Defaults are default values.

Compatibility IOS 2.1 +

14. Set the cache

<http-equiv= "Cache-control" content/>   

Mobile pages are usually cached after the first load, and then each refresh uses the cache instead of going back to the server to send the request. If you do not want to use the cache, you can set No-cache.

15. Desktop icons

<LinkRel= "Apple-touch-icon"Href= "Touch-icon-iphone.png"/><LinkRel= "Apple-touch-icon"Sizes= "76x76" Href= "Touch-icon-ipad.png" /><link rel= "Apple-touch-icon"  Sizes= "120x120"  Href= " Touch-icon-iphone-retina.png "/><link rel=" Apple-touch-icon " Sizes= "152x152"  Href=" touch-icon-ipad-retina.png "/>      

16. Browser private and other meta

QQ Browser Private

Full Screen mode

<name= "X5-fullscreen" content= "true">    

Force vertical Screen

<name= "X5-orientation" content= "Portrait">    

Force horizontal Screen

<name= "X5-orientation" content= "Landscape">    

Application Mode

<name= "X5-page-mode" content= "App">    

UC Browser Private

Full Screen mode

<name= "Full-screen" content= "Yes">    

Force vertical Screen

<name= "Screen-orientation" content= "Portrait">    

Force horizontal Screen

<name= "Screen-orientation" content= "Landscape">    

Application Mode

<name= "Browsermode" content= "Application">    

Other

Optimized for handheld devices, mainly for older browsers that do not recognize viewport, such as BlackBerry

<name= "handheldfriendly" content= "true">    

Microsoft's old-fashioned browser

<name= "mobileoptimized" content= "     +" >

Windows Phone clicks No highlight

<name= "Msapplication-tap-highlight" content= "No">    

17, iOS input keyboard event KeyUp, KeyDown, keypress support is not very good

The problem is that when using input search to do fuzzy search, in the keyboard input keywords, will be through the Ajax background query, and then return the data, and then the returned data for the keyword red. Using input to monitor the keyboard KeyUp event, in the Android phone browser is possible, but in the iOS phone browser red very slow, with input methods, not immediately corresponding KeyUp events, only after the deletion can be appropriate!

WORKAROUND: You can use the HTML5 Oninput event to replace the KeyUp

<InputType= "Text"Id= "Testinput"><script type= "Text/javascript" > document.getElementById ( ' testinput  "). AddEventListener (input "function (e) {var Value = E.target.value;}); </script>   

Some things to note about mobile development