Home > Article > Web Front-end > Detailed description of html mobile head tags and meta tags
Detailed description of html mobile head tags and meta tags
- 黄舟Original
- 2017-06-29 13:22:41980browse
Use HTML5 doctype, case-insensitive
<!DOCTYPE html>
More standard lang AttributeWriting
<html lang="zh-cmn-Hans">
meta
Statement document usage Character encoding
<meta charset='utf-8'>
Priority is given to using the latest version of IE and Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
Page description
<meta name="description" content="不超过150个字符"/>
Page keywords
<meta name="keywords" content=""/>
Web author
<meta name="author" content="name, email@gmail.com"/>
SearchEngine crawl
<meta name="robots" content="index,follow"/>
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 -->iOS deviceThe title after adding to the home screen (iOS 6 New)
<meta name="apple-mobile-web-app-title" content="标题">
Whether to enable WebApp full screen mode,
DeleteApple’s default toolbar and menu bar
<meta name="apple-mobile-web-app-capable" content="yes"/>
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">
Set Apple Toolbar Color
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
Ignore the numbers in the page and ignore the email recognition
<meta name="format-detection" content="telphone=no, email=no"/>
Enable the 360 browser's speed mode (webkit)
<meta name="renderer" content="webkit">
Avoid IE using compatibility mode
<meta http-equiv="X-UA-Compatible" content="IE=edge">
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">
ucforce vertical screen
<meta name="screen-orientation" content="portrait">
QQforce vertical screen
<meta name="x5-orientation" content="portrait">
UCforce 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
windows phone click without highlight
<meta name="msapplication-tap-highlight" content="no">
iOS iconiPhone and iTouch, default 57x57 pixels, must have
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>
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"/>
Retina iPad, 144x144 pixels, optional, but recommended
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>iOS startup
animationface
iPad vertical screen 768 x 1004 (standard resolution)<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>
iPad portrait screen 1536x2008 (Retina)
<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>
iPad landscape screen 1024x748 (standard resolution)
<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>
iPad landscape screen 2048x1496 (Retina)
<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>
iPhone/iPod Touch portrait screen 320x480 (standard resolution)
<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>
iPhone/iPod Touch portrait screen 640x960 (Retina )
<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>
iPhone 5/iPod Touch 5 portrait 640x1136 (Retina)
<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>iOS device endWindows 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"/>
Add favicon icon
<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
Title
<title>标题</title>
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!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn