Mobile devices
viewport: Can optimize the display of mobile browser. If it is not a responsive web site, do not use Initial-scale or disable scaling.
Most of the 4.7-5-inch devices have a viewport width of 360px;5.5 inch set to 400px;iphone6 set to 375px;ipone6 plus set to 414px.
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/><!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 -->
- Width: widths (values/device-width) (range from 200 to 10,000, default to 980 pixels)
- Height: Altitude (Value/device-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 indent (no,yes)
- Minimal-ui: You can minimize the upper and lower status bar when the page loads. (deprecated)
Note that many people use initial-scale=1 to non-responsive websites, which makes the site render at 100% width, and the user needs to manually move the page or zoom. If you use User-scalable=no or maximum-scale=1 with initial-scale=1 at the same time, users will not be able to zoom in/out of the page to see all the content.
- WebApp Full Screen mode : Fake app, offline app.
<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 启用 WebApp 全屏模式 -->
- Hide Status bar/Set status bar color : Only takes effect when webapp full screen mode is turned on. The content value is default | Black | Black-translucent.
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
- Title after adding to the main screen
<meta name="apple-mobile-web-app-title" content="标题">
- Ignore numbers automatically recognized as phone numbers
<meta content="telephone=no" name="format-detection" />
- Ignore recognition mailboxes
<meta content="email=no" name="format-detection" />
- Add Smart App banner Smart app Banner: Tell the browser the app that corresponds to this website and display the download Banner (for example) on the page. Reference documents
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
- Other reference documents
<!--optimized for handheld devices, mainly for older browsers that do not recognize viewport, such as BlackBerry--and<MetaName="Handheldfriendly"Content="True" ><!--Microsoft's Vintage browser--<MetaName="Mobileoptimized"Content=">"<!--UC Force vertical screen--<MetaName="Screen-orientation"Content="Portrait" ><!--QQ Forced vertical screen--<MetaName="X5-orientation"Content="Portrait" ><!--UC Mandatory fullscreen--<MetaName="Full-screen"Content="Yes" ><!--QQ Mandatory fullscreen--<MetaName="X5-fullscreen"Content="true" ><!--UC App mode--<meta name= "Browsermode" content="Application" ><!--QQ App mode--<meta name="X5-page-mode" content="app" ><! --Windows Phone Click No Highlight-<meta name="msapplication-tap-highlight" content="No" >
Web related
<meta charset=‘utf-8‘ />
- Use the latest version of IE and Chrome first
<Metahttp-equiv="X-ua-compatible"Content="Ie=edge,chrome=1"/><!--about x-ua-compatible-->< Meta http-equiv= "x-ua-compatible" content= "ie=6" ><!-- Use IE6--><meta http-equiv=< Span class= "Hljs-value" > "x-ua-compatible" content= "IE=7" ><!--use IE7--><meta http-equiv= "x-ua-compatible" Content= "ie=8" ><!--use IE8-->
- Browser Kernel control : Many domestic browsers are dual-core (WebKit and Trident), WebKit kernel high-speed browsing, IE core-compatible Web pages and the old version of the site. Web sites that add Meta tags can control what kernel rendering the browser chooses. Reference documents
<meta name="renderer" content="webkit|ie-comp|ie-stand">
The default kernel mode for dual-core browsers is as follows:
1. Sogou high-speed browser, QQ browser: IE core (compatibility mode)
2.360 Speed Browser, roaming browser: WebKit kernel (fast mode)
- prevents browsers from accessing page content from the local computer's cache : This setting allows visitors to browse offline.
<meta http-equiv="Pragma" content="no-cache">
<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 --><meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 -->
- site adaptation : Mainly used for pc-mobile phone page of the corresponding relationship.
<meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=url"><!--[wml|xhtml|html5]根据手机页的协议语言,选择其中一种;url="url" 后者代表当前PC页所对应的手机页URL,两者必须是一一对应关系。 -->
- transcoding declaration : Using Baidu to open the Web page may be transcoded (such as stickers), to avoid transcoding can add the following meta
<meta http-equiv="Cache-Control" content="no-siteapp" />
具体参考:1190000002407912
< Span style= "COLOR: #ff0000" > < Span style= "COLOR: #008000" > < Span style= "COLOR: #0000ff" > < Span style= "COLOR: #0000ff" >
The viewport attribute of the META element tag is applied