Meta tags in simple terms

Meta tags in simple terms

The META tag, commonly referred to as the tag, is an important HTML tag in the source code of an HTML web page. The META tag is used to describe the properties of an HTML web page document, such as author, date and time, web page description, keywords, page refresh, etc.

1. Viewport

XML/HTML CodeCopy content to clipboard
  1. < meta   name = "viewport"   content = "width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"   />    

(1) width controls the size of the viewport. You can specify a value, such as 640 or a special value; device-width is the width of the device (in pixels of CSS scaled to 100%);

(2) initial-scale: the initial zoom ratio when the page is first loaded;

(3) maximum-scale: the maximum scale to which the user is allowed to zoom, ranging from 0 to 10.0;

(4) minimum-scale: The minimum scale to which the user is allowed to zoom, ranging from 0 to 10.0;

(5) user-scalable: Whether the user can manually scale. The value can be: yes or true to allow the user to scale; no or false to not allow the user to scale.

2. content="IE=edge"

XML/HTML CodeCopy content to clipboard
  1. < meta   http-equiv = "X-UA-Compatible"   content = "IE=edge" >    

X-UA-Compatible is a proprietary <meta> attribute of IE8, which tells IE8 which IE version to use to render the web page, and is used in the <head> tag of HTML;

IE=edge, if the system has IE8 or above installed, the highest version of IE will be used for rendering; otherwise, this setting can be ignored.

3. Renderer

<meta name="renderer" content="webkit|ie-comp|ie-stand">

Specifies how dual-core browsers render pages by default.

webkit default webkit kernel;

ie-comp default IE compatibility mode;

ie-stand default IE standards mode;

The writing of webkit|ie-comp|ie-stand is based on the priority of the order. If it is not supported, it will go down. The browser will select the rendering kernel it has to process the current web page in order from left to right.

Currently supported browsers include: 360

4. apple-mobile-web-app-title

XML/HTML CodeCopy content to clipboard
  1. < meta   name = "apple-mobile-web-app-title"   content = "Blog Park" >    

The default name when sending to the screen

5. format-detection

XML/HTML CodeCopy content to clipboard
  1. < meta   name = "format-detection"   content = "telephone=no"   /> // Tell the device to ignore the numbers in the page as phone numbers
  2.   < meta   name = "format-detection"   content = "email=no"   /> //Do not let Android recognize the mailbox

<<:  About Vue's 4 auxiliary functions of Vuex

>>:  CSS3 to achieve floating cloud animation

Recommend

Detailed tutorial for installing mysql5.7.21 under Windows system

MySQL Installer provides an easy-to-use, wizard-b...

How to use react-color to implement the front-end color picker

background We can use react-color to implement th...

Seven Principles of a Skilled Designer (1): Font Design

Well, you may be a design guru, or maybe that'...

Detailed process of installing and configuring MySQL and Navicat prenium

Prerequisite: Mac, zsh installed, mysql downloade...

MySQL 5.7.11 zip installation and configuration method graphic tutorial

1. Download the MySQL 5.7.11 zip installation pac...

Spring Boot layered packaging Docker image practice and analysis (recommended)

Table of contents 1. Prepare the springboot proje...

25 Vue Tips You Must Know

Table of contents 1. Limit props to type lists 2....

Four data type judgment methods in JS

Table of contents 1. typeof 2. instanceof 3. Cons...

How to pass W3C validation?

In addition to setting regulations for various ta...

Instructions for using the meta viewport tag (mobile browsing zoom control)

When OP opens a web page with the current firmwar...

Vue3.0 adaptive operation of computers with different resolutions

First we need to install some dependencies npm i ...