META tags and viewport

Meta tags are used in the

The name attribute is the main function: corresponding to the Web page content, in order to facilitate search engine searching, classification, the most commonly used is description and keywords, browser vendor-defined meta-value, such as the many properties of iOS mobile page must be viewport.

The Http-equiv property is primarily used to simulate the response header of an HTTP protocol in an HTML document, associating the content attribute to the HTTP header.

Http-equiv Property

The Http-equiv property can use spoofed HTTP response header information, which can be disguised as HTTP response header information. JS can return and set the HTTP-EQUIV value via HTTPEQUIV. The most frequently seen Http-equiv is definitely the following sentence:

<http-equiv= "Content-type"  Content= "text/html; Charset=utf-8"  />

The HTML5 is simplified into the following code:

<charset= "Utf-8">

The Http-equiv property also has the following properties:

• Content-language

  Set Web page language

  < Meta   http-equiv = "Content-language" contect = "ZH-CN" >

• Refresh:

  Refresh page at specified time

  <http-equiv= "Refresh"  content= "+"> 

• Set-cookie :
  Set page cookie expiration time, operation cookie is similar to JS operation Cookie

  <http-equiv= "Set-cookie"  contect= "cookievalue=xxx; expires=wed, Dec 12:12:12 GMT; path=/">

• last-modified: Last Build time of page
• Location: Redirect to another URL
• window-target: An IFRAME with this property specified will open in the page window where the IFRAME is loaded.
• Date: Specifies the day that the page was created.
• Pragma: Set whether to cache Web pages
• Expires:

  Set Page cache Expiration time

  <http-equiv= "Expires"  contect= "Wed, Dec 12:12:12 GMT" >

• Cache-control: Sets the caching mechanism for the document. The values are as follows:
  1. Public: Both the browser and cache server can cache page information
  2. Private: Cached only on browser side
  3. No-cache: Neither the browser nor the cache server should cache page information
  4. No-store: The request and response information should not be stored in the other's disk system

PHP settings prevent multiple headers from being sent at once:

PHP Code

<? PHP // Date in the past Header ("Pragma:no-cache"); Header ("Cache-control:no-cache"); Header ("expires:wed, Dec 12:12:12 GMT");? >

HTML code for the above PHP code output

 <  meta  http-equiv  = "Pragma"   Contect  = "No-cache"  >  <  meta  http-equiv  = "Cache-control"   Contect  = "No-cache"  >  <  meta  http-equiv  = "Expires"   Contect  = "Wed, Dec 12:12:12 GMT"  >  

If you write the HTML code of the PHP output directly on the page, it may not work, because only a few browsers support the above properties.

Name Property

The Name property provides names in name/value pairs that can be customized, so both the search engine and browser vendors have the name attribute defined for their own browser.

iOS-related

• Apple-touch-icon：

  Create a desktop icon and a splash screen, specifying its value in the META tag to make your page appear as a custom icon when saved to the home screen, rather than as a thumbnail of the page.

  <Linkrel= "Apple-touch-icon"href= "/custom_icon.png"/><Linkrel= "Apple-touch-icon"href= "Touch-icon-iphone.png" /><Linkrel= "Apple-touch-icon"Sizes= "72x72"href= "Touch-icon-ipad.png" /><Linkrel= "Apple-touch-icon"Sizes= "114x114"href= "Touch-icon-iphone4.png" />

• Apple-touch-startup-image:

  Give the page a splash screen, similar to the native app. But the declared picture for the iphone and itouch size can only be 460, the other size is not valid. But you can also use sizes to make multiple device adaptations.

  <y; link rel= "Apple-touch-startup-image"href= "/startup.png">//for iphone Retina Display High<y; link rel= "Apple-touch-startup-image"Sizes= "640x960"href= "Img/splash-screen-640x960.png" />//for iPad Landscape<y; link rel= "Apple-touch-startup-image"Sizes= "1024x748"href= "Img/splash-screen-1024x748.png" />//for iPad Portrait<y; link rel= "Apple-touch-startup-image"Sizes= "768x1004"href= "Img/splash-screen-768x1004.png" />

  ps:ios2.1 above support

• Apple-mobile-web-app-title

  Title when added to the home screen

  < y ; meta name = "Apple-mobile-web-app-title" content = "title" >

• Apple-mobile-web-app-status-bar-style

  Hide status bar, default parameter

  < y ; meta name = "Apple-mobile-web-app-status-bar-style" content = "BLACK" />

  ps:ios2.1 above support

• Apple-mobile-web-app-capable

  Sets whether a Web application runs in full-screen mode.

  < y ; meta name = "Apple-mobile-web-app-capable" content = "Yes" />

  ps:ios2.1 above support

• Format-detection

  Ignore numbers in a page as phone numbers

  <name= "format-detection"  content= "Telephone=no"  />

  ps:ios1.0 above support

Viewport

This attribute is thought to be the most important of mobile development, so it becomes a chapter. The viewport attribute can tell the browser how to normalize the rendered Web page.

• Width: viewport (range from 223 to 10,000)
• Height: viewport (range from 223 to.)
• Initial-scale: Initial zoom ratio (range from >0 to 10)
• Minimum-scale: The minimum scale to allow the user to zoom (range from >0 to 10)
• maxnim-scale: Maximum scale to allow the user to zoom (range from >0 to 10)
• user-scalable: Whether the user can manually indent (no,yes)
• minimal-ui: iOS 7.1 New page loading can minimize the upper and lower status bar

PS: As set on the mobile side as follows <meta name="viewport" content="width=320;initial-scale=1.0;">则是告诉了浏览器网页在320px下显示是最合适的，那么移动端浏览器则会在设备宽内显示320px的内容，在移动端上320px代表的是设备宽度所能容纳的像素数而不是实际宽度

Window8

• Msapplication-tilecolor:

  Set the Windows 8 tile color

  <name= "Msapplication-tilecolor " content= "#ff0"/> 

• msapplication-tileimage:

  Set the Windows 8 tile icon

  <name= "Msapplication-tileimage"  content= "Icon.png"  />

Search engine Related

• Date:

  Define page Generation time

  <name= "date"  content= "2008-07-12t20:50:30+00:00"/> 

• keywords:

  Define Web page Keywords

  <name= "keywords"  content= "HTML js css"/> 

• Description:

  Define a short description of a webpage

  <name= "description"  content= "semantics, each platform to provide compatibility, improve user browsing speed, optimize product interaction, Provides an extensible interface "/>

• Author:

  Define page Authors

  <name= "Author"  content= "http://html5jscss.com/" />

• Copyright:

  Define Web page Copyrights

  <name= "Copyright"  content= "©http://www.dreamdu.com"/ >

• Robots

  Defines the page search engine index, robotterms is a set of values separated by commas (,), usually with the following values: None,noindex,nofollow,all,index and follow.

  <name= "Robots"  content= "robotterms"/> 

  For Google Googlebot use robots, for Baidu Baiduspider use robots

other

• and 360 first-Gen browser kernel controls

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

• Force rendering using the browser's highest version mode

  <http-equiv= "x-ua-compatible"  content= "Ie=edge,chrome= 1 "/>

  This meta tag is primarily to prevent users from installing IE9, but the browser is rendering in IE7 mode.

META tags and viewport