Meta tags are an auxiliary tag in the head area of the HTML language. They are located between the head tag and the title tag at the head of the HTML document. They provide information that is not visible to the user.
Meta: That is, metadata is the data information of the data.
Metadata can be called by a browser (how to display content or reload a page), search engine (keyword), or other web service.
In our plain words, it is a useless tag itself, but once some effects are set inside it through other properties, it works, so we call it metadata.
<!-- Define the character encoding of the document --><meta charset=utf-8 /> <!-- Force the Chromium kernel, which acts on domestic dual-core browsers such as 360 browsers, QQ browsers, etc. --><meta name=renderer content=webkit/><!-- Force the Chromium kernel, which acts on other dual-core browsers --><meta name=force-rendering content=webkit/><!-- If the Google Chrome Frame plug-in is installed, it is forced to be the Chromium kernel, otherwise the highest version of the IE kernel supported by the machine is forced to be used on IE browsers --><meta http-equiv=X-UA-Compatible content=IE=Edge,chrome=1/><!-- Set the window size width Set the width of layout viewport to a positive integer, or the string width-device initial-scale Set the initial scaling value of the page, as a number, it can take the minimum scaling value of the user, as a number, it can take the maximum scaling value of the user, as a number, it can take the maximum scaling value of the user, as a number, it can take the maximum scaling value of the user, as a number, it can take the decimal shrink-to-fit=no In IOS9, if the previous attribute needs to be used, this height needs to be added to set the height of the layout viewport. This attribute is not important to us. It is rarely used to use user-scalable whether the user is allowed to scale, the value is no or yes, no means not allowed, yes means allow --><meta name=viewport content=width=device-width, initial-scale=1.0, shrink-to-fit=no, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no/><!-- Page description--><meta name=description content=no more than 150 characters/><!-- Page keywords--><meta name=keywords content=/><!-- Web author--><meta name=author content=name, [email protected]/><!-- Search engine crawling all: the file will be retrieved, and the links on the page can be queried; none: the file will not be retrieved, and the links on the page cannot be queried; index: the file will be retrieved; follow: the links on the page can be queried; noindex: the file will not be retrieved; nofollow: The link on the page cannot be queried. --><meta name=robots content=index,follow/><!-- Ignore the number in the page to be recognized as a phone, ignore email recognition--><meta name=format-detection content=telphone=no, email=no/><!-- IOS begin --><!-- Title after adding to the home screen (new in iOS 6) --><meta name=apple-mobile-web-app-title content=title><!-- When the website is added to the home screen, the address bar can be hidden, and it is only for ios safari (after ios7.0 version, the effect is no longer visible on safari) --><meta name=apple-mobile-web-app-capable content=yes/><!-- Whether to enable WebApp Full screen mode, delete Apple's default toolbar and menu bar --><meta name=apple-touch-fullscreen content=yes/><!-- Add Smart App Ad Bar Smart App Banner (iOS 6+ Safari) --><meta name=apple-itunes-app content=app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL><!-- Set Apple toolbar color: the default value is default (white), which can be set to black (black) and black-translucent (gray translucent) --><meta name=apple-mobile-web-app-status-bar-style content=black/><!-- Do not allow Baidu to transcode --><meta http-equiv=Cache-Control content=no-siteapp /><!-- 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 force vertical screen--><meta name=screen-orientation content=portrait><!-- QQ force vertical screen--><meta name=x5-orientation content=portrait><!-- UC force full screen--><meta name=full-screen content=yes><!-- QQ force 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><!-- windows phone Click without highlights --><meta name=msapplication-tap-highlight content=no><!-- iOS icon begin The icon when adding the website to the iOS desktop --><!-- iPhone and iTouch, default 57x57 pixels, must have --><link rel=apple-touch-icon-precomposed sizes=57x57 href=table_ico57.png><!-- Retina iPhone and Retina iTouch, 114x114 pixels, can be without, but it is recommended to have --><link rel=apple-touch-icon-precomposed sizes=72x72 href=table_ico72.png><link rel=apple-touch-icon-precomposed sizes=114x114 href=table_ico114.png><!-- Retina iPad, 144x144 pixels, can be without, but it is recommended to have --><link rel=apple-touch-icon-precomposed sizes=144x144 href=table_ico144.png><!-- iOS startup screen begin --><!-- iPad Vertical screen 768 x 1004 (standard resolution) --><link rel=apple-touch-startup-image sizes=768x1004 href=/splash-screen-768x1004.png/><!-- iPad horizontal screen 1024x748 (standard resolution) --><link rel=apple-touch-startup-image sizes=1024x748 href=/Default-Portrait-1024x748.png/><!-- iPad vertical screen 1536x2008 (Retina) --><link rel=apple-touch-startup-image sizes=1536x2008 href=/splash-screen-1536x2008.png/><!-- iPad horizontal screen 2048x1496 (Retina) --><link rel=apple-touch-startup-image sizes=2048x1496 href=/splash-screen-2048x1496.png/><!-- iPhone/iPod Touch vertical screen 320x480 (standard resolution) --><link rel=apple-touch-startup-image href=/splash-screen-320x480.png/><!-- iPhone/iPod Touch vertical screen 640x960 (Retina) --><link rel=apple-touch-startup-image sizes=640x960 href=/splash-screen-640x960.png/><!-- iPhone 5/iPod Touch 5 vertical screen 640x1136 (Retina) --><link rel=apple-touch-startup-image sizes=640x1136 href=/splash-screen-640x1136.png/><!-- IOS end --><!-- Windows 8 tile color --><meta name=msapplication-TileColor content=#000/><!-- Windows 8 tile icon --><meta name=msapplication-TileImage content=icon.png/><!-- Add RSS Subscription--><link rel=alternate type=application/rss+xml title=RSS href=/rss.xml/><!-- sns social tag begin --><!-- Reference Weibo API --><meta property=og:type content=type/><meta property=og:url content=URL address/><meta property=og:title content=title/><meta property=og:image content=image content=picture/><meta property=og:description content=description/><!-- sns social tag end -->Access issues with lower version of IE browser
Add code that forces the Webkit kernel. There is no IE compatibility problem with using domestic browsers to access websites, and the number of IE visitors will be greatly reduced. But it is still inevitable that some old computers will be accessed through the lower version of IE browser. If we perform CSS HACK specifically for this small number of users, it will seriously increase our workload.
What's more, since January 2016, Microsoft has stopped providing support and updates to IE11 below. It has not been updated for so long. The low-version IE not only has problems with CSS3 and HTML5 support, but also has security issues.
So, if we do not support low-version IE, what should these small number of users do?
We can use the if IE statement to add IE upgrade prompts to the website, prompting users to upgrade their browser, or switch to more advanced browsers before accessing.
We can add a piece of code to jump to the IE upgrade prompt page under the meta tag just now (jump when the IE version is lower than IE11), so that users of lower versions of IE prompt them to upgrade or change their browser when accessing.
Force the Webkit kernel and prompt the user to upgrade the complete code of the low-version IE access user as shown below. Add this code to the head template file <head> tag:
<meta name=renderer content=webkit/><meta name=force-rendering content=webkit/><meta http-equiv=X-UA-Compatible content=IE=edge,chrome=1/><script>/*@cc_on window.location.href=http://support.dmeng.net/upgrade-your-browser.html?referrer=+encodeURIComponent(window.location.href); @*/</script>
(@cc_on is a conditional compilation statement unique to IE10 and older versions of IE, so it can be used to determine whether other IE versions other than IE11.)
Because the low-version IE is often incompatible with CSS3 and HTML5 websites when accessing, the above code is added, and when the low-version IE user accesses, it will jump to the upgrade prompt page to avoid unnecessary resource loading and reduce website server overhead.
Test code<!DOCTYPE html><html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0 /> <title>Document</title> <meta name=renderer content=webkit/> <meta name=force-rendering content=webkit/> <meta http-equiv=X-UA-Compatible content=IE=edge,chrome=1/> <script>/*@cc_on window.location.href=http://support.dmeng.net/upgrade-your-browser.html?referrer=+encodeURIComponent(window.location.href); @*/</script> </head> <body> <h1>Hello world</h1> </body></html>
IE 11 will output normally
IE 10 will see the following page
refer toA summary of front-end meta usage - MR_LIXP
Force the browser to use WebKit kernel speed mode through meta code (solving that meta name=renderer content=webkit does not work)- [Ai Huanhuan]
Meta settings for mobile web pages - Tianya Passerby
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.