The meta-chapter on mobile development
- <meta name= "viewport" content= "Width=device-width, initial-scale=1, User-scalable=no, Minimal-ui"/>
Width:viewport width (range from 200 to 10,000, default is 980 pixels)
Height:viewport height (range from 223 to 10,000)
Initial-scale: Initial zoom ratio (range from >0 to 10)
Minimum-scale: The minimum scale to allow the user to zoom
Maximum-scale: Allows the user to zoom to the maximum scale
User-scalable: Whether the user can manually scale
- <meta name= "apple-mobile-web-app-capable" content= "yes"/>
Whether to delete the default Apple toolbar and menu bar
- <meta name= "Apple-mobile-web-app-status-bar-style" content= "Black"/>
When the app form is set, the effect is to control the status bar display style, but the native iOS7 test has not changed ... Puzzled
- <meta name= "format-detection" content= "Telephone=no, Email=no"/>
The iphone will recognize a string of numbers as a phone number, and when clicked, it will prompt for a call, and block this feature to set the telephone to No,
To enable the Telephony feature, use the <a href= "tel:13888888888" >call me:13888888888</a> instead,
Mail is <a href= "Mailto:[email protected]?subject=hello%20again" > Send mail </a>
<!--Enable 360 browser's fast mode (WebKit)-<MetaName= "Renderer"Content= "WebKit"><!--Avoid IE using compatibility mode-<MetaHttp-equiv= "X-ua-compatible"Content= "Ie=edge"><!--Optimized for handheld devices, mainly for older browsers that do not recognize viewport, such as BlackBerry-<MetaName= "handheldfriendly"Content= "true"><!--Microsoft's old-fashioned browser-<MetaName= "Mobileoptimized"Content= "320"><!--UC Force vertical screen-<MetaName= "Screen-orientation"Content= "Portrait"><!--QQ Forced vertical Screen-<MetaName= "X5-orientation"Content= "Portrait"><!--UC Force full Screen-<MetaName= "Full-screen"Content= "Yes"><!--QQ Mandatory Fullscreen-<MetaName= "X5-fullscreen"Content= "true"><!--UC Application Mode-<MetaName= "Browsermode"Content= "Application" > QQ application Mode -->meta name= " X5-page-mode " Content=" app " > windows Phone Click No highlight --><name= "Msapplication-tap-highlight" Content= "no" >
In addition, Apple has two interesting tags:
1. Apple-touch-icon
<link rel="Apple-touch-icon" sizes="76x76" href= "touch-icon-ipad.png" >
If you set it up apple-mobile-web-app-capable
yes
, you can add a website to your home screen by adding to the home button on your Mac's Safari. Instead, the apple-touch-icon
icon that is added to the main screen uses the image we specify.
2. Apple-touch-startup-image
<link rel= "apple-touch-startup-image" href="/startup.png" >
Based on apple-mobile-web-app-capable
yes
the settings, you can set a nativeapp-like splash screen for WebApp. Unlike apple-touch-icon
, the apple-mobile-web-app-capable
sizes attribute is not supported and media is used to load different splash screens. Detailed query of the desert article .
Iphone<link href= "Apple-touch-startup-image-320x460.png" Media= "( device-width:320px) " Rel=" Apple-touch-startup-image "/>//iPhone retinalink href= " Apple-touch-startup-image-640x920.png " Media=" ( device-width:320px) and (-webkit-device-pixel-ratio:2) " rel = "Apple-touch-startup-image" />
So, for the mobile side, the generic starter template is written as Sublime's snippet:
<Snippet><Content><![cdata[<! DOCTYPE html><HtmlLang= "en"><Head><MetaCharSet= "UTF-8"/><MetaName= "Viewport"Content= "Width=device-width, initial-scale=1, User-scalable=no, Minimal-ui"/><MetaName= "Apple-mobile-web-app-capable"Content= "Yes"/><MetaName= "Apple-mobile-web-app-status-bar-style"Content= "BLACK"/><MetaName= "Format-detection"Content= "Telephone=no, Email=no"/><Title>${1}</Title></Head><Body>${2}</Body></Html>]]></Content> <tabtrigger< Span style= "color: #0000ff;" >>mhd</tabtrigger > <description< Span style= "color: #0000ff;" >>mobile frame</description> <scope> Text.html</scope ></snippet>
Reference:
Http://www.w3cplus.com/mobile/mobile-terminal-refactoring-create-page.html
Http://blog.sina.com.cn/s/blog_6d48e77101015kqr.html
Http://blog.sina.com.cn/s/blog_3f1fc8950101fz2v.html
The meta-chapter on mobile development