Home > Article > Web Front-end > HTML mobile terminal-detailed explanation of each meta tag of a new blank page
HTML mobile terminal-detailed explanation of each meta tag of a new blank page
- 黄舟Original
- 2017-06-29 13:26:033217browse
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title></head><body></body></html>
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 scaling, the user is not allowed to zoom (that is, scaling is prohibited), and the address bar and the address bar are hidden when the web page is loaded. Navigation bar (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: The target-densitydpi screen pixel density is related to scaling. You can try modifying this demo and use your mobile phone to see the actual effect. I generally don't set this property.
apple-mobile-web-app-capable
Whether to enable 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
When the webapp function is started, the color of the top navigation bar that displays mobile phone signal, time, and battery. The default value is default (white), which can be set to black (black) and black-translucent (gray translucent). This is mainly set based on the main color matching of the actual page design.
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
Note: If you don’t understand apple-mobile-web-app-capable and apple-mobile-web-app-status-bar-style, You can check the third reference article below, which contains screenshots.
telephone & email
Ignore the numbers in the page that are recognized as phone numbers
<meta name="format-detection" content="telephone=no" />
There is also an email recognition
<meta name="format-detection" content="email=no" />
Of course both can be written in Together
<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">
Reference:
Supported Meta Tags section of the Safari HTML Reference
-
Those things about mobile front-end work---Meta tags in front-end production
Meta tags on mobile platforms-----magical effects
Meta tag of WebApp
link tag
apple-touch-icon
Ifapple-mobile-web -app-capable is set to yes, then you can use the Add to Home Screen button to add the website to the home screen on iPhone, iPad, and iTouch Safari. By setting the corresponding apple-touch-icon tag, the icon added to the home screen will use the picture we specified.
The following is to select an optimal icon for different ox devices. The default size for iPhone is 60px, iPad is 76px, and retina screen is multiplied by 2 times.
<link rel="apple-touch-icon" href="touch-icon-iphone.png"> <link rel="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">
Before ios7, the system would add 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 insteadapple-touch-icon.png
The priority used by the icon is as follows:
If there is no recommended size for the corresponding device For consistent icons, the one 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 given priority.
If there are multiple icons that meet the recommended size, the icon containing the keyword precomposed will be selected first.
If the icon is not specified using the link tag in the area, it will automatically search the root directory of the website with apple-touch-icon as the prefix png icon.
Note: ios7 no longer adds special effects to icons. Before ios7, special effects were added to icons by default unless the icon has the keyword -precomposed.png as the suffix.
Reference:
Specifying a Webpage Icon for Web Clip
-
WebApp apple-touch-icon
http://taylor.fausak.me/2013/11/01/ios-7-web-apps/
apple-touch-startup -image
is also based on apple-mobile-web-app-capable and is set to yes. You can use WebApp to set a startup screen similar to NativeApp.
<link rel="apple-touch-startup-image" href="/startup.png">
is different from apple-touch-icon. apple-mobile-web-app-capable does not support the sizes attribute, so media is used to control retina and horizontal and vertical screens. 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" />
Summary
Blank page template, and then add apple-touch-icon and apple-touch-startup-image based on the specific situation
<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" />
Document
The above is the detailed content of HTML mobile terminal-detailed explanation of each meta tag of a new blank page. For more information, please follow other related articles on the PHP Chinese website!