In the previous study of the front-end, the understanding of meta tags was only this sentence.
<meta charset=UTF-8>
But when you open any website, there is a column of meta tags in its head tag. For example, we have the VeVb martial arts website, but I am not familiar with it, so I added the meta tag to the front of the study plan.
<meta name=viewport content=width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no>
This is the most commonly used. The width and height instructions specify the logical width and height of the viewport respectively. Their value is either a number in pixels or a special marker symbol. The width directive uses the device-width tag to indicate that the viewport width should be the device's screen width. Similarly, the height directive uses the device-height flag to indicate that the viewport height is the device's screen height.
The user-scalable directive specifies whether the user can zoom the viewport, that is, the view of the web page. A value of yes allows the user to zoom, a value of no disallows zooming.
The initial-scale directive is used to set the initial scaling of the web page. The default initial scaling value varies between smartphone browsers. Normally the device will render the entire web page in the browser, setting it to 1.0 will display the unscaled web document.
The maximum-scale and minimum-scale directives are used to set the user's limit on the zoom ratio of the Web page. Values range from 0.25 to 10.0. Like initial-scale, the value of these directives is the scaling applied to the viewport's contents.
All smartphone browsers support the width and user-scalabel directives of the ViewPort <meta> tag. But Opera Mobile does not use the user-scalable directive, instead arguing that users should always retain the ability to zoom web pages in mobile browsers.
The following is really rarely used. devicePixelRatiowindow.devicePixelRatio is the ratio of physical pixels to device-independent pixels (dips) on the device. The formula expression is: window.devicePixelRatio = physical pixels/dips
fit-to-screen website adaptive screenIf the value of content is less than or equal to screen width, the website adaptive screen fit-to-screen will be turned off. The website will not scale with the browser stretch.
If the value of content is greater than screen width; fit-to-screen will be enabled
Apple browser related2015-07-08
<meta name=viewport content=minimal-ui>
In Safari on iOS 7.1, the minimal-ui attribute is added to the meta tag, so that the top address bar and bottom navigation bar can be hidden when the web page is loaded.
<meta name=apple-mobile-web-app-capable content=yes>
Whether to enable the webapp function is set to yes. The website will delete the default Apple toolbar and menu bar in full-screen mode.
<meta name=apple-touch-fullscreen content=yes>
Enable support for web app programs
<meta name=format-detection content=telephone=no><meta name=format-detection content=email=no />
The iPhone will automatically add a link style to your text, and click the number to automatically dial the number!
telephone=no ignores the numbers on the page and identifies them as phone numbers
telephone=yes turns on the conversion of numbers into dial-up links. It is turned on by default!
<meta name=apple-mobile-web-app-status-bar-style content=default /><meta name=apple-mobile-web-app-status-bar-style content=black /><meta name=apple- mobile-web-app-status-bar-style content=black-translucent />
Control the status bar display style default (white) black (black) black-translucent (gray translucent)
link tag apple-touch-iconIf apple-mobile-web-app-capable is set to yes, 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=76×76″ href=touch-icon-ipad.png><link rel=apple- touch-icon sizes=120×120″ href=touch-icon-iphone-retina.png><link rel=apple-touch-icon sizes=152×152″ 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 instead of apple-touch-icon.png.
The priority of icon usage is as follows:If there is no icon that matches 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 are no icons larger than the recommended size, the icon closest to the recommended size will be chosen first.
If there are multiple icons that meet the recommended size, the icon containing the keyword precomposed will be selected first.
If you do not specify an icon using the link tag in the area, it will automatically search for png icons prefixed with apple-touch-icon in the root directory of the website.
Note: ios7 no longer adds special effects to icons. Before ios7, special effects were added to icons by default unless the icon had the keyword -precomposed.png as the suffix. Internet Explorer <meta http-equiv=X-UA-Compatible content=IE=edge> Prevent IE from using compatibility mode
<meta name=MobileOptimized content=320″> The definition width tag set by Microsoft for IE Mobile version
The browser will not automatically adjust the size of the file, which means it is a fixed size and will not stretch or scale with the browser.
<meta name=HandheldFriendly content=true /> : Whether it is friendly to handheld devices, only true or false
<meta name=screen-orientation content=portrait> Force vertical screen
<meta name=full-screen content=yes> Force full screen
<meta name=browsermode content=application> Application mode
<meta name=x5-orientation content=portrait> Force vertical screen
<meta name=x5-fullscreen content=true> Force full screen
<meta name=x5-page-mode content=app> Application mode
<meta name=renderer content=webkit> Enable rapid mode
The meta refers to the element that provides meta-information about the page, such as descriptions and keywords for search engines and update frequency. The tag is located at the head of the document and contains no content. A tag's properties define the name/value pairs associated with the document.
What are the features unique to the mobile version?<meta content=width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0 name=viewport> <meta content=yes name=apple-mobile-web-app-capable> <meta content=black name=apple-mobile-web-app-status-bar-style> <meta content=telephone=no name=format-detection>
The first meta tag means: force the width of the document to the width of the device to remain 1:1, and the maximum width ratio of the document is 1.0, and users are not allowed to click on the screen to enlarge the view;
The second meta tag is the Safari private meta tag in the iPhone device, which means: allow full-screen mode browsing;
The third meta tag is also a private tag of iPhone, which specifies the style of the status bar at the top of Safari in iPhone;
The color of the status bar (top bar of the screen) in web app applications;
The default value is default (white), which can be set to black (black) and black-translucent (gray translucent).
Note: If the value is black-translucent, it will occupy the px position of the page and float above the page (it will cover the 20px height of the page – the Retina screen of iphone4 and itouch4 is 40px).The fourth meta tag means: Tell the device to ignore the numbers on the page as phone numbers.
Let’s take a look at the meta of the mobile pages of major manufacturers: 1. Tmall<meta name=aplus-terminal content=1/><meta name=apple-mobile-web-app-title content=TMALL/><meta name=apple-mobile-web-app-capable content=yes/><meta name=apple-mobile-web-app-status-bar-style content=black-translucent/><meta name=viewport content=width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no/><meta name=format-detection content=telephone=no, address=no>2. Taobao
<meta charset=utf-8><meta content=yes name=apple-mobile-web-app-capable/> <meta content=yes name=apple-touch-fullscreen/> <meta content=telephone=no,email= no name=format-detection/> <meta name=App-Config content=fullscreen=yes,useHistoryState=yes,transition=yes/><meta name=viewport content=initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no>3. Jingdong
<title>Jingdong-Mobile Version</title><meta name=viewport content=width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;><meta http-equiv=Content -Type content=text/html; charset=GBK><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><meta http-equiv=Expires content=-1><meta http-equiv= Cache-Control content=no-cache><meta http-equiv=Pragma content=no-cache><meta name=Keywords content=><meta name=description content=>4. NetEase
<title>NetEase Mobile</title><meta name=viewport content=width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no><meta content =telephone=no name=format-detection /><meta name=keywords content= /><meta name=description content= />5. Baidu
<meta name=referrer content=always><meta charset=utf-8><meta name=viewport content=width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no><meta name=format-detection content=telephone=no>6. Sohu
<title>Mobile Sohu.com</title> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /><meta http-equiv=Cache-Control content=no-cache /><meta name=viewport content=width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0 /><meta name=MobileOptimized content=320/><meta name=description content= /><meta name=keywords content= />
----
Simulate mobile web page<meta name=viewport content=width=device-width,user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0″>
viewport -> window (display area)
width=device-width device width
viewport<metaname = 'viewport 'content = width=320><metaname = 'viewport 'content = width=device-width>
user-scalable=no/0 whether to allow scaling
initial-scale=1.0 initial value
maximum-scale=1.0
minimum-scale=1.0
--------------------------
<meta name=viewport content=width=device-width, user-scalable=no>
user-scalable=no/0 disables users from scaling the page
<meta name=viewport content=width=device-width, user-scalable=no, initial-scale=1.0″>
initial-scale=1.0 initialize page zoom ratio
<meta name=viewport content=width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0″>
maximum-scale=1.0 maximum scaling ratio (for individual mobile phones Huawei Meta8)
-----------------------
Apple device-specific meta:<!—Allow web pages to run as apps (allow adding to home screen)—><meta name=apple-mobile-web-app-capable content=yes><!—Status bar color—><meta name=apple-mobile -web-app-status-bar-style content=black>Jingdong meta:
<meta name=viewport content=width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0″><meta name=apple-mobile-web-app-capable content=yes>< meta name=apple-mobile-web-app-status-bar-style content=black><!—Prohibited phone numbers and email addresses—><meta name=format-detection content=telephone=no,email=no>Taobao meta:
<meta content=yes name=apple-mobile-web-app-capable><!–Click the page area to display in full screen—><meta content=yes name=apple-touch-fullscreen/><meta content=telephone=no,email =no name=format-detection/><!–Application information, retain system history, motion effects–><meta name=App-Config content=fullscreen=yes,useHistoryState=yes,transition=yes/>Other meta:
<!–Force 360 Browser to use the chrome kernel to render the page–><meta name=renderer content=webkit><!–Try to use IE’s latest mode to render–><meta http-equiv=X-UA-Compatible content=IE= edge><!–Optimized for handheld devices, mainly for some old browsers that do not recognize viewports, such as BlackBerry–><meta name=HandheldFriendly content=true><!–Microsoft’s old browser–><meta name=MobileOptimized content=320″><!– uc forces vertical screen–><meta name=screen-orientation content=portrait><!– QQ forces vertical screen screen–><meta name=x5-orientation content=portrait><!– UC forces full screen–><meta name=full-screen content=yes><!– QQ forces full screen–><meta name=x5-fullscreen content=true><!– UC application mode–><meta name=browsermode content=application><!– QQ application mode–><meta name=x5-page-mode content=app>Summarize
The above is the entire content of this article. I hope that the content of this article has certain reference value for everyone's study or work. If you have any questions, you can leave a message for communication. Thank you for your support of VeVb Wulin Network.