HTML commonly used meta encyclopedia (recommended)

The Meta tag is an auxiliary tag in the head area of the HTML language. It is located between the head tag and the title tag in the header of the HTML document and provides information that is invisible to users.
Meta: Metadata is the data information of data.

Metadata can be used by browsers (how to display content or reload a page), search engines (keywords), or other web services.

In our vernacular, it is a useless tag itself, but once certain effects are set through other attributes within it, it comes into play, so we call it "metadata".

<!-- Defines the character encoding of the document -->
<meta charset="utf-8" /> 
<!-- Force Chromium kernel, works on domestic dual-core browsers such as 360 Browser, QQ Browser, etc. -->
<meta name="renderer" content="webkit"/>
<!-- Force Chromium kernel to work on other dual-core browsers-->
<meta name="force-rendering" content="webkit"/>
<!-- If the Google Chrome Frame plug-in is installed, the Chromium kernel is forced to be used. Otherwise, the highest version of the IE kernel supported by the machine is forced to be used for the IE browser. -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
<!-- 
    Set the width of the layout viewport, a positive integer or a string "width-device"
    initial-scale sets the initial zoom value of the page, which is a number with decimals minimum-scale allows the user's minimum zoom value, which is a number with decimals maximum-scale allows the user's maximum zoom value, which is a number with decimals shrink-to-fit=no In iOS 9, this property needs to be added for the previous properties to work height sets the height of the layout viewport. This property is not important to us and is rarely used user-scalable allows users to zoom, the value is "no" or "yes", no means not allowed, yes means allowed -->
<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=""/>
<!-- Page Author-->
<meta name="author" content="name, [email protected]"/>
<!-- 
    Search engine crawl all: the files 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 indexed; 
    nofollow: The links on the page cannot be queried. 
-->
<meta name="robots" content="index,follow"/>
<!-- Ignore the numbers in the page as phone numbers and 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 quick launch mode, the address bar can be hidden. This is only for Safari on iOS (after iOS 7.0, the effect is no longer visible on Safari) -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<!-- Whether to enable WebApp full screen mode and delete Apple's default toolbar and menu bar-->
<meta name="apple-touch-fullscreen" content="yes"/>
<!-- Add Smart App Banner (iOS 6+ Safari) -->
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
<!-- Set the color of the Apple toolbar: 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 viewport, 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 forced vertical screen -->
<meta name="x5-orientation" content="portrait">
<!-- UC forced full screen -->
<meta name="full-screen" content="yes">
<!-- QQ forced 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">
<!-- No highlight when clicking on windows phone -->
<meta name="msapplication-tap-highlight" content="no">

<!-- 
    iOS Icons begin 
    Icon when the website is added to the iOS desktop -->
<!-- iPhone and iTouch, default 57x57 pixels, required -->
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="table_ico57.png">
<!-- Retina iPhone and Retina iTouch, 114x114 pixels, optional but recommended -->
<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, optional but recommended -->
<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 Icons-->
<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 -->
<!-- Refer to 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="Picture" />
<meta property="og:description" content="Description" />
<!-- sns social tag end -->

Access issues with lower version IE browsers

After adding the code to force the Webkit kernel, there will be no IE compatibility issues when using domestic browsers to visit websites, and the number of IE visitors will be greatly reduced. However, it is still inevitable that some old computers will access the system through low-version IE browsers. 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 for versions below IE11. It has been so long since there was an update, and lower versions of IE not only have problems with CSS3 and HTML5 support, but also have security issues.

So, if we don’t support lower versions of IE, what should we do with this small number of users?

We can use the if IE statement to add an IE upgrade prompt to the website, prompting users to upgrade their browsers or switch to a more advanced browser before visiting.

We can add a section of code under the meta tag that jumps to the IE upgrade prompt page (jump when the IE version is lower than IE11) to prompt users with lower versions of IE to upgrade or change browsers when they visit.

The complete code for forcing the Webkit kernel and prompting users with lower versions of IE to upgrade is as follows. Add this code to the <head> tag of the header template file:

<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 specific to IE10 and older versions of IE, so it can be used to determine whether it is an IE version other than IE11.)

Because low-version IE often visits the wrong version of the website due to incompatibility with CSS3 and HTML5, after adding the above code, when low-version IE users visit the website, they will be redirected to the upgrade prompt page, avoiding unnecessary resource loading and reducing 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 to

Summary of front-end Meta usage - MR_LIXP

Force the browser to use WebKit kernel high-speed mode through meta code (solve meta name="renderer" content="webkit" does not work) - [Ai Huanhuan]

Meta settings for mobile web pages - Tianya Passenger

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: Let's talk about the size and length limits of various objects in MySQL

>>: Exploring the use of percentage values in the background-position property