meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection"content="telephone=no, email=no" />
viewport
View window, a mobile-specific label. Generally, the following code can be used:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
The above code in turn indicates that the width is set to the width of the device, the default is not zooming, the user is not allowed to zoom (that is, zooming is prohibited), and the address bar and navigation bar are hidden when the web page is loaded (new in ios7.1).
width – // [pixel_value | device-width] viewport 的宽度，范围从 200 到 10,000，默认为 980 像素
height – // [pixel_value | device-height ] viewport 的高度，范围从 223 到 10,000
initial-scale – // float_value，初始的缩放比例 （范围从 > 0 到 10）
minimum-scale – // float_value，允许用户缩放到的最小比例
maximum-scale – // float_value，允许用户缩放到的最大比例
user-scalable – // [yes | no] 用户是否可以手动缩放
target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi] 目标屏幕像素密度
Note: target-densitydpi screen pixel density is related to scaling, you can try to modify this demo and see the actual effect on your mobile phone. I generally don't set this property.
apple-mobile-web-app-capable
Whether to start the webapp function will delete the default Apple toolbar and menu bar.
<meta name="apple-mobile-web-app-capable" content="yes" />
apple-mobile-web-app-status-bar-style
The color of the top navigation bar that displays cell signal, time, and battery when the webapp function is launched. The default value is default (white), which can be set to black (black) and black-translucent (gray translucent). This is mainly set according to the main color of the actual page design.
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
Ignore numbers in pages recognized as phone numbers
<meta name="format-detection" content="telephone=no" />
There is also an email identification <meta name="format-detection" content="email=no" />
Combine the two:
<meta name="format-detection" content="telphone=no, email=no" />
other meta
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
link tag
apple-touch-icon
If apple-mobile-web-app-capable is set to yes, then on iPhone, iPad, and iTouch safari, you can use the Add to Home button to add websites to the home screen. By setting the corresponding apple-touch-icon label, the icon added to the home screen will use the image we specified.
The following is to choose an optimal icon for different ox devices. The default size of iphone is 60px, ipad is 76px, retina screen is multiplied by 2 times.
1.<link rel="apple-touch-icon" href="touch-icon-iphone.png">
2.<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
3.<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
4.<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
Before ios7, the system added special effects (rounded corners and highlights) to icons by default. If you do not want the system to add special effects, you can use apple-touch-icon-precomposed.png instead of apple-touch-icon.png
The priority of icon usage is as follows:
If there is no icon with the recommended size for the corresponding device, the icon that is larger than the recommended size but closest to the recommended size will be used first. If there is no icon larger than the recommended size, the icon closest to the recommended size will be preferred. If there are multiple icons that meet the recommended size, the icon containing the keyword precomposed will be preferred. If the icon is not specified with the link tag in the area specification, it will automatically search for the png icon prefixed with apple-touch-icon in the root directory of the website.
Note: ios7 no longer adds special effects to the icon. Before ios7, it added special effects to the icon by default, unless the icon has the keyword -precomposed.png as the suffix.
apple-touch-startup-image
Also based on apple-mobile-web-app-capable set to yes, you can use WebApp to set a startup screen similar to NativeApp.
1.<link rel="apple-touch-startup-image" href="/startup.png">
Unlike apple-touch-icon, apple-mobile-web-app-capable does not support the sizes attribute, so use media to control retina and horizontal and vertical screens to load different splash screens.
// iPhone
<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" />
// iPhone Retina
<link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
// iPhone 5
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x1096.png">
// iPad portrait
<link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image" />
// iPad landscape
<link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image" />
// iPad Retina portrait
<link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
// iPad Retina landscape
<link href="apple-touch-startup-image-1496x2048.png"media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image" />
Then add apple-touch-icon and apple-touch-startup-image on this basis according to the specific situation
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection"content="telephone=no, email=no" />
<title>Document</title>
</head>
<body>
</body>
</html>