Detailed description of html mobile head tags and meta tags-HTML Tutorial-php.cn

Detailed description of html mobile head tags and meta tags

黄舟

Release： 2017-06-29 13:22:41

Original

1042 people have browsed it

Use HTML5 doctype, case-insensitive

<!DOCTYPE html>

Copy after login

More standard lang AttributeWriting

<html lang="zh-cmn-Hans">

Copy after login

meta

Statement document usage Character encoding

<meta charset=&#39;utf-8&#39;>

Copy after login

Priority is given to using the latest version of IE and Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

Copy after login

Page description

<meta name="description" content="不超过150个字符"/>

Copy after login

Page keywords

<meta name="keywords" content=""/>

Copy after login

Web author

<meta name="author" content="name, email@gmail.com"/>

Copy after login

SearchEngine crawl

<meta name="robots" content="index,follow"/>

Copy after login

Addviewport## for mobile devices #

<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->

Copy after login

iOS device

The title after adding to the home screen (iOS 6

New)

<meta name="apple-mobile-web-app-title" content="标题">

Copy after login

Whether to enable WebApp full screen mode,

DeleteApple’s default toolbar and menu bar

<meta name="apple-mobile-web-app-capable" content="yes"/>

Copy after login

Add Smart App Advertising Banner Smart App Banner (iOS 6+ Safari)

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

Copy after login

Set Apple Toolbar Color

<meta name="apple-mobile-web-app-status-bar-style" content="black"/>

Copy after login

Ignore the numbers in the page and ignore the email recognition

<meta name="format-detection" content="telphone=no, email=no"/>

Copy after login

Enable the 360 browser's speed mode (webkit)

<meta name="renderer" content="webkit">

Copy after login

Avoid IE using compatibility mode

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Copy after login

Optimized for handheld devices, mainly for some old browsers that do not recognize viewports, such as BlackBerry

<meta name="HandheldFriendly" content="true">

Copy after login

Microsoft's Old browser

<meta name="MobileOptimized" content="320">

Copy after login

ucforce vertical screen

<meta name="screen-orientation" content="portrait">

Copy after login

QQforce vertical screen

<meta name="x5-orientation" content="portrait">

Copy after login

UCforce full screen

<meta name="full-screen" content="yes">

Copy after login

QQ forced full screen

<meta name="x5-fullscreen" content="true">

Copy after login

UC application mode

<meta name="browsermode" content="application">

Copy after login

QQ application mode

windows phone click without highlight

<meta name="msapplication-tap-highlight" content="no">

Copy after login

iOS icon

iPhone and iTouch, default 57x57 pixels, must have

<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>

Copy after login

Retina iPhone and Retina iTouch, 114x114 pixels, optional but recommended

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>

Copy after login

Retina iPad, 144x144 pixels, optional, but recommended

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>

Copy after login

iOS startup

animationface

iPad vertical screen 768 x 1004 (standard resolution)

<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>

Copy after login

iPad portrait screen 1536x2008 (Retina)

<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>

Copy after login

iPad landscape screen 1024x748 (standard resolution)

<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>

Copy after login

iPad landscape screen 2048x1496 (Retina)

<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>

Copy after login

iPhone/iPod Touch portrait screen 320x480 (standard resolution)

<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>

Copy after login

iPhone/iPod Touch portrait screen 640x960 (Retina )

<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>

Copy after login

iPhone 5/iPod Touch 5 portrait 640x1136 (Retina)

<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>

Copy after login

iOS device end

Windows 8 Tile Color

 <meta name="msapplication-TileColor" content="#000"/>

Copy after login

Windows 8 Tile Icon

<meta name="msapplication-TileImage" content="icon.png"/>

Copy after login

Add RSS Subscription

<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>

Copy after login

Add favicon icon

<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>

Copy after login

Title

<title>标题</title>

Copy after login

The above is the detailed content of Detailed description of html mobile head tags and meta tags. For more information, please follow other related articles on the PHP Chinese website!