1. <!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 -->
  2. <html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->
  3. <head>
  4. <!-- 声明文档使用的字符编码 -->
  5. <meta charset='utf-8'>
  6. <!-- 优先使用 IE 最新版本和 Chrome -->
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  8. <!-- 页面描述 -->
  9. <meta name="description" content="不超过150个字符"/>
  10. <!-- 页面关键词 -->
  11. <meta name="keywords" content=""/>
  12. <!-- 网页作者 -->
  13. <meta name="author" content="name, email@gmail.com"/>
  14. <!-- 搜索引擎抓取 -->
  15. <meta name="robots" content="index,follow"/>
  16. <!-- 为移动设备添加 viewport -->
  17. <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
  18. <!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->
  19.  
  20. <!-- iOS 设备 begin -->
  21. <meta name="apple-mobile-web-app-title" content="标题">
  22. <!-- 添加到主屏后的标题(iOS 6 新增) -->
  23. <meta name="apple-mobile-web-app-capable" content="yes"/>
  24. <!-- 是否启用 WebApp 全屏模式,删除苹果默认的工具栏和菜单栏 -->
  25.  
  26. <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
  27. <!-- 添加智能 App 广告条 Smart App Banner(iOS 6+ Safari) -->
  28. <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
  29. <!-- 设置苹果工具栏颜色 -->
  30. <meta name="format-detection" content="telphone=no, email=no"/>
  31. <!-- 忽略页面中的数字识别为电话,忽略email识别 -->
  32. <!-- 启用360浏览器的极速模式(webkit) -->
  33. <meta name="renderer" content="webkit">
  34. <!-- 避免IE使用兼容模式 -->
  35. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  36. <!-- 不让百度转码 -->
  37. <meta http-equiv="Cache-Control" content="no-siteapp" />
  38. <!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->
  39. <meta name="HandheldFriendly" content="true">
  40. <!-- 微软的老式浏览器 -->
  41. <meta name="MobileOptimized" content="320">
  42. <!-- uc强制竖屏 -->
  43. <meta name="screen-orientation" content="portrait">
  44. <!-- QQ强制竖屏 -->
  45. <meta name="x5-orientation" content="portrait">
  46. <!-- UC强制全屏 -->
  47. <meta name="full-screen" content="yes">
  48. <!-- QQ强制全屏 -->
  49. <meta name="x5-fullscreen" content="true">
  50. <!-- UC应用模式 -->
  51. <meta name="browsermode" content="application">
  52. <!-- QQ应用模式 -->
  53. <meta name="x5-page-mode" content="app">
  54. <!-- windows phone 点击无高光 -->
  55. <meta name="msapplication-tap-highlight" content="no">
  56. <!-- iOS 图标 begin -->
  57. <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>
  58. <!-- iPhone 和 iTouch,默认 57x57 像素,必须有 -->
  59. <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>
  60. <!-- Retina iPhone 和 Retina iTouch,114x114 像素,可以没有,但推荐有 -->
  61. <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>
  62. <!-- Retina iPad,144x144 像素,可以没有,但推荐有 -->
  63. <!-- iOS 图标 end -->
  64.  
  65. <!-- iOS 启动画面 begin -->
  66. <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>
  67. <!-- iPad 竖屏 768 x 1004(标准分辨率) -->
  68. <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>
  69. <!-- iPad 竖屏 1536x2008(Retina) -->
  70. <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>
  71. <!-- iPad 横屏 1024x748(标准分辨率) -->
  72. <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>
  73. <!-- iPad 横屏 2048x1496(Retina) -->
  74.  
  75. <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>
  76. <!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->
  77. <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>
  78. <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->
  79. <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>
  80. <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->
  81. <!-- iOS 启动画面 end -->
  82.  
  83. <!-- iOS 设备 end -->
  84. <meta name="msapplication-TileColor" content="#000"/>
  85. <!-- Windows 8 磁贴颜色 -->
  86. <meta name="msapplication-TileImage" content="icon.png"/>
  87. <!-- Windows 8 磁贴图标 -->
  88.  
  89. <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
  90. <!-- 添加 RSS 订阅 -->
  91. <link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
  92. <!-- 添加 favicon icon -->
  93.  
  94. <!-- sns 社交标签 begin -->
  95. <!-- 参考微博API -->
  96. <meta property="og:type" content="类型" />
  97. <meta property="og:url" content="URL地址" />
  98. <meta property="og:title" content="标题" />
  99. <meta property="og:image" content="图片" />
  100. <meta property="og:description" content="描述" />
  101. <!-- sns 社交标签 end -->
  102.  
  103. <title>标题</title>
  104. </head>

h5移动端页面meta标签的更多相关文章

  1. 移动端Web Meta标签

    原文  http://blog.segmentfault.com/jianjian_532633/1190000000654839 添加到推刊   在介绍移动端特有 meta 标签之前,先简单说一下 ...

  2. HTML页面meta标签内容详解

    所有的浏览器都支持meta标签,用于提供页面相关信息,信息都是以名(http-equiv和name标示)/值(content标示)对的形式现实. 属性content,用于定义http-equiv(定义 ...

  3. HTML 页面meta标签

    1. 概述 1.1 说明 <meta>标签提供了HTML文档的元数据[元数据(Metadata)是数据的数据信息],即页面的元信息,元数据不会显示在客户端,但是会被浏览器解析.meta元素 ...

  4. 移动端h5页面meta标签设置

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable= ...

  5. 嵌套移动APP端的H5页面meta标签

    <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, ...

  6. HTML5_嵌套移动APP端的H5页面meta标签

    <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, ...

  7. H5页面meta标签小结:

    <meta name="viewport" content="width=device-width,user-scalable=no"> <m ...

  8. 浅谈h5移动端页面的适配问题

    一.前言 昨天唠叨了哈没用的,今天说点有用的把.先说一下响应式布局吧,我一直认为响应式布局的分项目,一下布局简单得项目做响应式还是可以可以得.例如博客.后台管理系统等.但是有些会认为响应式很牛逼,尤其 ...

  9. H5移动端页面设计心得分享

    去年JDC出了不少优秀的武媚娘…不,H5呢,大家都很拼,同时当然也积累了一些经验和教训,今天结合咱们的实战案例,从字体,排版,动效,音效,适配性,想法这几个方面好好聊一聊关于H5的设计,希望对同学们有 ...

随机推荐

  1. MongoDB学习之mongoose

    MongoDB介绍: MongoDB是基于Javascript语言的数据库,存储格式是JSON,而Node也是基于JavaScript的环境(库),所以node和mongoDB的搭配能减少因为数据转换 ...

  2. 中值滤波C语言优化

    中值滤波C语言优化 图像平滑是图像预处理的基本操作,本文首先用不同的方法对一张图片做预处理比较它们效果的不同,然后针对中值滤波,实现了一种快速实现.(其实是copy的opencv实现,呵呵).因为op ...

  3. Android 多个activity之间的共享数据

    最近打算做一个时间助手,一个service监听课表信息.课表信息可以通过另外的activity来设置,所以这里就涉及到了数据的同步问题.我设置后的信息必须同步到监听的信息去. 在java中我们用全局变 ...

  4. Entity Framework:“无法加载指定的元数据资源

    System.Data.Entity.Core.MetadataException:“无法加载指定的元数据资源 CodeFirst方式使用EF,写入数据时报错.System.Data.Entity.C ...

  5. (三)svn 服务器端之创建仓库

    创建仓库 svn服务端创建完成需要创建仓库,仓库中存放 要被管理的文件. 通过开始菜单进入  VisualSVN server manager: 主界面为: 右键点击Repositories创建仓库 ...

  6. SpringMvc-helloword

    说明:在此只说明helloword的简单实现,通过helloword例子先了解springMvc是这样工作的,然后在一步步的研究原理 配置web.xml 1.配置servlet servlet-cla ...

  7. June 17th 2017 Week 24th Saturday

    Absence sharpens love, presence strengthens it. 相聚爱益切,离别情更深. There is almost no such love that can i ...

  8. 如何为属性是disabled的表单绑定js事件

    $(document).click(function(e){ var el = e.target; if (el.tagName == 'INPUT') { $(el).removeAttr('dis ...

  9. C/C++ 修改控制台程序文字颜色

    可以修改前景色(字体颜色)和背景色. 示例代码如下: #include <iostream> #include <Windows.h> //需要引用Windows.h usin ...

  10. Django:模板系统

    一,常用语法 只需要记两种特殊符号: {{  }}和 {% %} 变量相关的用{{}},逻辑相关的用{%%}. 二,常量 {{ 变量名 }} 变量名由字母数字和下划线组成. 点(.)在模板语言中有特殊 ...