Mobile Web Development Code Snippets

WebApp refers to web-based systems and applications that publish a complex set of content and functionality to a wide range of end users (not to say what). In fact, the Web app is an iphone, Android and other smart phone optimized web site, it uses the technology is nothing more than HTML or HTML5, CSS3, JavaScript, server technology java, PHP, etc. (this understand). The more straightforward point is that the development of Web sites for smartphones is only better than what we often call WAP. I began to touch mobile web apps from the first half, groping, searching, exploring (here, thanks to Kevin for a missed lesson), and doing some projects, and now here to put in the past or other Daniel's collation of some of the code to do a systematic collation.

I. About META

1. IOS

The following meta-tags are mostly or completely used for iOS systems, with detailed comments in the code.

1| <meta name= "apple-mobile-web-app-capable"  content= "yes" >2| <meta name= " Apple-touch-fullscreen " content=" yes ">3| <meta name=" Apple-mobile-web-app-status-bar-style " content=" Black ">/* * 1, 2 is the role of removing the default iOS toolbar and menu bar and full-screen display, This please cooperate with 4th, 5 understanding. The function of  *  3rd is to change the status bar style by default (white)  *  optional Black (black) and black-translucent (Gray translucent) **/4| < Meta name= "Viewport"  content= "width=device-width, initial-scale=1, minimum-scale=1.0,  user-scalable=0, maximum-scale=1.0 ">5| <meta name=" viewport " content=" width= device-width, initial-scale=1, minimum-scale=1.0, user-scalable=0, maximum-scale=1.0,  minimal-ui ">/* *  comparison, 4th is less than the 5th one minimal-ui * initial-scale  the initial scaling ratio  *  minimum-scale  allow the user to zoom to the minimum scale  * maximum-scale  allow the user to zoom to the maximum scale  * user-scalable   Whether users can manually scale  * minimal-ui    ios7.1 Mobile Safari Browser does not display the address bar and toolbars  * : Viewport tag is used to control screen scaling **/6| <link rel= " Apple-touch-icon " href=" icon address >/* *  set Web app on the place Home screen on the icon file path.  *  picture size can be set to 57*57PX (IPhone)  | 114*114px (Retina)  | 72*72px (IPAD) **/6| < Link rel= "Apple-touch-icon"  href= "icon Address" >/* *  set Web app on the place Home screen on the icon file path.  *  picture size can be set to 57*57PX (IPhone)  | 114*114px (Retina)  | 72*72px (IPAD) **/7| < link href= ""  media= "(device-width: 320px)"  rel= "Apple-touch-startup-image" >/* *   Splash screen image (media related do not introduce) **/

Analyze the above code, especially the 1,3,5,6 bar together, create an icon on the desktop, let the Web content in the application style display, and make the status bar transparent, your Web app becomes a high imitation app? ：）

2. Other

8| <meta name= "format-detection" content= "Telephone=no" >9| <meta name= "format-detection" content= "Email=no" >/* * 8th: Prohibit number as phone number * 9th: Prohibit the mailbox from becoming clickable **/

Second, send SMS, call

1| <a href= "http://www.smohan.net" SMS: Mobile phone number, mobile phone number ″> mass SMS </a> send SMS to multi-person links 2| <a href= "SMS: Phone number? body=" > SMS </a> send SMS link with content 3| <a href= "tel:18888886666" > Call us at 18888886666 </a> calling link

Third, the front-end control "function"

Htmlpop-up

Automatically adjust font size when you prevent the screen from rotating 1|   Html{-webkit-text-size-adjust:none;} Prevents users from selecting text 2|   Html{-webkit-user-select:none;} Prevent users from saving pictures copy pictures 3|   Body{-webkit-touch-calloutt:none;} text box Voice input 4| <input type= "text" x-webkit-speech/> file upload, capture media 5| <input type= "file" accept = "image/*; Capture=camera "/> <input type=" file "accept =" video/*; Capture=camcorder "/> <input type=" file "accept =" audio/*; Capture=microphone "/>

Mobile Web Development Code Snippets