移动前端开发中添加一些webkit专属的HTML5头部标签，帮助浏览器更好解析html代码，更好地将移动web前端页面表现出来。本文整理一些常用的meta标签。

<!DOCTYPE html> <!-- 使用 HTML5 doctype，不区分大小写 -->

<html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->

<head>

 <!-- 声明文档使用的字符编码 -->

 <meta charset='utf-8'>

 <!-- 优先使用 IE 最新版本和 Chrome -->

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

 <!-- 页面描述 -->

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

 <!-- 页面关键词 -->

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

 <!-- 网页作者 -->

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

 <!-- 搜索引擎抓取 -->

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

 <!-- 为移动设备添加 viewport -->

 <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 设备 begin -->

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

 <!-- 添加到主屏后的标题（iOS 6 新增） -->

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

 <!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->

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

 <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->

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

 <!-- 设置苹果工具栏颜色 -->

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

 <!-- 忽略页面中的数字识别为电话，忽略email识别 -->

 <!-- 启用360浏览器的极速模式(webkit) -->

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

 <!-- 避免IE使用兼容模式 -->

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

 <!-- 不让百度转码 -->

 <meta http-equiv="Cache-Control" content="no-siteapp" />

 <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->

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

 <!-- 微软的老式浏览器 -->

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

 <!-- uc强制竖屏 -->

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

 <!-- QQ强制竖屏 -->

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

 <!-- UC强制全屏 -->

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

 <!-- QQ强制全屏 -->

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

 <!-- UC应用模式 -->

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

 <!-- QQ应用模式 -->

 <meta name="x5-page-mode" content="app">

 <!-- windows phone 点击无高光 -->

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

 <!-- iOS 图标 begin -->

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

 <!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->

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

 <!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->

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

 <!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->

 <!-- iOS 图标 end -->

 <!-- iOS 启动画面 begin -->

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

 <!-- iPad 竖屏 768 x 1004（标准分辨率） -->

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

 <!-- iPad 竖屏 1536x2008（Retina） -->

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

 <!-- iPad 横屏 1024x748（标准分辨率） -->

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

 <!-- iPad 横屏 2048x1496（Retina） -->

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

 <!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->

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

 <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->

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

 <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->

 <!-- iOS 启动画面 end -->

 <!-- iOS 设备 end -->

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

 <!-- Windows 8 磁贴颜色 -->

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

 <!-- Windows 8 磁贴图标 -->

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

 <!-- 添加 RSS 订阅 -->

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

 <!-- 添加 favicon icon -->

 <!-- sns 社交标签 begin -->

 <!-- 参考微博API -->

 <meta property="og:type" content="类型" />

 <meta property="og:url" content="URL地址" />

 <meta property="og:title" content="标题" />

 <meta property="og:image" content="图片" />

 <meta property="og:description" content="描述" />

 <!-- sns 社交标签 end -->

 <title>标题</title>

</head>

最新文章

  1. Linux的学习笔记
  2. Android Studio多渠道打包
  3. 第五天 loadmore
  4. Excel的文件打开特别慢,xls文件特别大解决一例
  5. REUSE_ALV_GRID_DISPLAY显示ALV，设置可编辑时，与内表数据同步问题
  6. TE.TYCO.AMP/JST 现货资源备份库存表日志记录-2015-04-13
  7. 深入浅出Spring（五） SpringMVC
  8. 基础学习总结（四）--SQLite
  9. (ASP.NET)C#连接Oracle数据库示例(中文乱码问题解决)
  10. js之封装sort实现json格式数据的排序
  11. Entity Framework with MySQL 学习笔记一(关系)
  12. http与https的区别以及https的加密原理
  13. div+css中常见的浏览器兼容性处理-兼容不同浏览器
  14. notify()、notifyAll()和wait()
  15. 键盘游戏之canvas--用OO方式写
  16. Struts2+Spring+Hibernate step by step 11 ssh拦截验证用户登录到集成
  17. 机器学习笔记2 – sklearn之iris数据集
  18. ES6 let和const命令（4）
  19. Visual Studio 2015 无法命中断点
  20. Jinja2用法总结

热门文章

  1. Delphi管理多线程之线程局部存储：threadvar
  2. 【20140113-2】MyEclipse生成javadoc时出错：编码GBK的不可映射字符
  3. 分佈式事務故障處理暨ORA-24756: transaction does not exist處理
  4. NBU expired Media，Media ID not found in EMM database
  5. 在ubuntu中安装jdk
  6. hdu 1063(java写高精度）
  7. barabasilab-networkScience学习笔记5- Barab&#225;si-Albert 模型
  8. Pig用户自定义函数（UDF）转
  9. AJAX案例四：省市联动
  10. Android开发中Handler的经典总结