整理一些平时常用的，方便查阅

  1. <!-- 字体编码 -->
  2. <meta charset="utf-8" />
  3.  
  4. <!-- 关键字 -->
  5. <meta name="keywords" content="" />
  6.  
  7. <!-- 说明 -->
  8. <meta name="description" content="" />
  9.  
  10. <!-- 作者 -->
  11. <meta name="author" content="" />
  12.  
  13. <!-- 设置文档宽度、是否缩放 -->
  14. <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
  15.  
  16. <!-- 优先使用IE最新版本或chrome -->
  17. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  18.  
  19. <!-- 360读取到这个标签立即钱换到极速模式 -->
  20. <meta name="renderer" content="webkit" />
  21.  
  22. <!-- 禁止百度转码 -->
  23. <meta http-equiv="Cache-Control" content="no-siteapp" />
  24.  
  25. <!-- UC强制竖屏 -->
  26. <meta name="screen-orientation" content="portrait" />
  27.  
  28. <!-- QQ强制竖屏 -->
  29. <meta name="x5-orientation" content="portrait" />
  30.  
  31. <!-- UC强制全屏 -->
  32. <meta name="full-scerrn" content="yes" />
  33.  
  34. <!-- QQ强制全屏 -->
  35. <meta name="x5-fullscreen" content="ture" />
  36.  
  37. <!-- QQ应用模式 -->
  38. <meta name="x5-page-mode" content="app" />
  39.  
  40. <!-- UC应用模式 -->
  41. <meta name="browsermode" content="application">
  42.  
  43. <!-- window phone 点亮无高光 -->
  44. <meta name="msapplication-tap-highlight" content="no" />
  45.  
  46. <!-- 安卓设备不自动识别邮件地址 -->
  47. <meta name="format-detection" name="email=no" />
  48.  
  49. <!-- iOS设备 -->
  50.  
  51. <!-- 添加到主屏幕的标题 -->
  52. <meta name="apple-mobile-web-app-title" content="标题" />
  53.  
  54. <!-- 是否启用webApp全屏 -->
  55. <meta name="apple-mobile-web-app-capable" content="yes" />
  56.  
  57. <!-- 设置状态栏的背景颜色，启用webapp模式时生效 -->
  58. <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent/black/default" />
  59. <!-- 半透明/黑色/默认白色 -->
  60.  
  61. <!-- 禁止数字识别为电话号码 -->
  62. <meta name="format-detection" content="telephone=no" />
  63.  
  64. <!-- 智能添加广告条 -->
  65. <meta name="apple-itunes-app" content="app-id=myappstoreID,affiliate-data=myaffiliatedata,app-argument=myurl" />

移动设备使用添加 viewport

viewport 可以让布局在移动浏览器上显示的更好。 通常会写

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

content 参数：

  • width viewport 宽度(数值/device-width)
  • height viewport 高度(数值/device-height)
  • initial-scale 初始缩放比例
  • maximum-scale 最大缩放比例
  • minimum-scale 最小缩放比例
  • user-scalable 是否允许用户缩放(yes/no)
  • minimal-ui iOS 7.1 beta 2 中新增属性（注意：iOS8 中已经删除），可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写：
  1. <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">

而如果你的网站不是响应式的，请不要使用 initial-scale 或者禁用缩放。

  1. <meta name="viewport" content="width=device-width,user-scalable=yes">

适配 iPhone 6 和 iPhone 6plus 则需要写：

  1. <meta name="viewport" content="width=375">
  2. <meta name="viewport" content="width=414">

大部分 4.7~5 寸的安卓设备的 viewport 宽设为 360px，iPhone 6 上却是 375px，大部分 5.5 寸安卓机器（比如说三星 Note）的 viewport 宽为 400，iPhone 6 plus 上是 414px。

更多关于头部标签<head>里的内容请查看这位http://www.cnblogs.com/xiuhongbin/p/meta.html的博客

HTML5头部标签中<meta>常用信息的更多相关文章

  1. webkit,HTML5头部标签

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

  2. html的meta总结，html标签中meta属性使用介绍(转)

    html的meta总结,html标签中meta属性使用介绍 2014年11月5日 5928次浏览 引子 之前的我的博客中对于meta有个介绍,例如:http://www.haorooms.com/po ...

  3. HTML5头部标签备忘

    DOCTYPE DOCTYPE(Document Type),该声明位于文档中最前面的位置,处于html 标签之前,此标签告知浏览器文档使用哪种HTML 或者XHTML 规范. 推荐使用HTML5 推 ...

  4. html的meta总结，html标签中meta属性使用介绍

    引用:http://www.haorooms.com/post/html_meta_ds 前言 meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta ...

  5. html标签中meta属性使用介绍

    前言 meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用 ...

  6. HTML 常用头部标签（meta）

    先来看下常用的标签列表,后文会一一介绍: <!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --> <html lang=&quo ...

  7. HTML5 头部标签定义

    <!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --> <html lang="zh-cmn-Hans"&g ...

  8. 移动端的头部标签和meta

    <!DOCTYPE html><!--HTML5 doctype--> <html> <head> <title>xxx</title ...

  9. 移动端的头部标签和 meta

    使用 HTML5 doctype,不区分大小写 <!DOCTYPE html> 更加标准的 lang 属性写法 http://zhi.hu/XyIa <html lang=" ...

随机推荐

  1. Submin1安装记录（CentOS5）

    安装SVN和Apache wget http://opensource.wandisco.com/RPM-GPG-KEY-WANdisco -O /tmp/RPM-GPG-KEY-WANdisco & ...

  2. xtrabackup原理、备份日志分析、备份信息获取

    一. xtrabackup备份恢复工作原理: extrabackup备份简要步骤 InnoDB引擎很大程度上与Oracle类似,使用redo,undo机制,XtraBackup在备份的时候,以read ...

  3. 网络编程应用：基于TCP协议【实现对象传输】--练习

    要求: 基于TCP协议实现,客服端向服务器发送一个对象 服务器接受并显示用户信息 ,同时返回给客户端 "数据已收到" 建一个Student类,属性:name age Student ...

  4. Python内置函数进制转换的用法

    使用Python内置函数:bin().oct().int().hex()可实现进制转换. 先看Python官方文档中对这几个内置函数的描述: bin(x)Convert an integer numb ...

  5. 框架和css基础

    框架:一.框架集:1.<frameset></frameset>不能有<body>标签 属性:1)cols:把网页拆分成几列(左右拆分)eg:<framese ...

  6. python读写文件相关内容

    1.python读取文件 f = open('E:/info.txt', 'r')#用read的方式打开a = 0for line in f.readlines():读取没一行,就是读取所有文件的意思 ...

  7. 读Zepto源码之样式操作

    这篇依然是跟 dom 相关的方法,侧重点是操作样式的方法. 读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 zepto1.2. ...

  8. Sqlmap注入Base64编码的注入点

    不小心删了,找快照才找到的.补回来... 上次遇到一个Base64的注入点,手工注入太麻烦,于是在网上看了一下sqlmap Base64注入的方法,如下: sqlmap -u http://xxxx. ...

  9. [BZOJ1415]聪聪和可可

    Input 数据的第1行为两个整数N和E,以空格分隔,分别表示森林中的景点数和连接相邻景点的路的条数. 第2行包含两个整数C和M,以空格分隔,分别表示初始时聪聪和可可所在的景点的编号. 接下来E行,每 ...

  10. IntelliJ IDEA的激活和汉化

    1.下载 IntelliJ IDEA 下载地址 Community 社区版,免费使用,下载后发现没有JAVA EE,推荐下载 Ultimate Ultimate 需要注册码. 2.激活 我下载的是20 ...