桌面端开发中，meta标签通常用来为搜索引擎优化（SEO）及 robots定义页面主题，或者是定义用户浏览器上的cookie；它可以用于鉴别作者，设定页面格式，标注内容提要和关键字；还可以设置页面使其可以根据你定义的时间间隔刷新自己，以及设置RASC内容等级，等等。

移动端开发中，meta标签除了桌面端中的功能设置外，还包括，比如viewport设置，添加到主屏幕图标，标签页颜色等等实用设置。具体可以看后面详细的介绍。

meta标签分类

meta标签根据属性的不同，可分为两大部分：http-equiv 和 name 属性。

http-equiv：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助浏览器正确地显示网页内容。
name属性：主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于浏览器，搜索引擎等机器人识别，等等。

pc端：

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

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

<head>

    <meta charset="UTF-8">

<!--设置 360 浏览器渲染模式：webkit 为极速内核，ie-comp 为 IE 兼容内核，ie-stand 为 IE 标准内核。 -->

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

<!--360 浏览器就会在读取到这个标签后，立即切换对应的极速核。 另外为了保险起见再加入 -->

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

<!--Google Chrome浏览器 -->

<!--关闭chrome浏览器下翻译插件； -->

　　<meta name="google" value="notranslate" />

<!-- Internet Explorer浏览器 -->

<!--IE8以下以IE7标准模式呈现网页，而IE9则以IE9的标准模式呈现网页： -->

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">

    <title>Title</title>

</head>

<body>

</body>

</html>

移动端：

<meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
注意，先前width=device-width或=320的时候在 iPhone5 下有这个黑边，所以按照上面来写
  • 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=" initial-scale=1, minimal-ui">

meta与浏览器：

-百度禁止转码：

　　通过百度手机打开网页时，百度可能会对你的网页进行转码，脱下你的衣服，往你的身上贴狗皮膏药的广告，为此可在 head 内添加

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

-QQ 浏览器（X5 内核）同样适用于微信，QQ等第三方应用页面开发。

  1. <!-- 设置锁定横屏、竖屏显示模式，portrait（横屏），landscape（竖屏）-->
  2. <meta name="x5-orientation" content="portrait|landscape">
  3. <!-- 设置全屏显示页面 -->
  4. <meta name="x5-fullscreen" content="true">
  5. <!-- 开启页面以应用模式显示（全屏显示等） -->
  6. <meta name="x5-page-mode" content="app">

-360

　　设置 360 浏览器渲染模式：webkit 为极速内核，ie-comp 为 IE 兼容内核，ie-stand 为 IE 标准内核。

  1. <meta name="renderer" content="webkit|ie-comp|ie-stand">

　　360 浏览器就会在读取到这个标签后，立即切换对应的极速核。 另外为了保险起见再加入

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

-UC

　　1.设置屏幕方向：portrait为横屏，landscape为竖屏；

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

　　2.设置全屏；

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

　　3.设置适应屏幕排版（缩放是否显示滚动条）；

　　UC 浏览器在标准排版效果实现的基础上，提供适应屏幕的排版方式，当设置为 uc-fitscreen=yes，页面进行缩放操作时，仅放大图片和文字等元素，但不放大屏幕宽度，保持不出现水平（横向）滚动条。

　   <meta name="viewport" content="uc-fitscreen=no|yes">

　　4.排版模式；

　　UC 浏览器提供两种排版模式，分别是适屏模式（fitscreen）及标准模式（standard），其中适屏模式简化了一些页面的处理，使得页面内容更适合进行页面阅读、节省流量及响应更快，而标准模式则能按照标准规范对页面进行排版及渲染。

　　<meta name="layoutmode" content="fitscreen|standard">

　　5.夜间模式；

　　可以帮助用户在低亮度或黑暗情况下更舒适的进行页面浏览。由于基于网页的应用愈加复杂，由浏览器实现的单一夜间模式不一定能够适应所有情况(例如游戏应用)，因此 UC 浏览器允许网页设计者对其设计的页面禁用浏览器的夜间模式，自行设计更适合用户使用的夜间模式。

　　注意：页面内的 frame/iframe 中的夜间模式的 meta 不生效。

　　<meta name="nightmode" content="enable|disable">

　　6.整页图片强制显示；

　　为了节省流量及加快速度，UC 为用户提供了无图模式，在实际使用中存在页面中的图片是不可缺少的，例如验证码，地图等。通过强制图片显示的功能可以保证图片显示不受用户的设置影响。

**注意：整页图片强制显示仅对当前页面生效，对页面内的 frame/iframe 不生效，也不影响前进后退的页面。

　　<meta name="imagemode" content="force">

　　7.开启应用模式；

　　应用模式是为方便 Web 应用及游戏开发者设置的综合开关，通过meta标签进行指示打开，当进入应用模式时，浏览器将自动调整以下参数:

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

　　8.缩放字体；禁用的 UC 浏览器的字体缩放功能

　　<meta name="wap-font-scale" content="no">

-Apple IOS原生浏览器；

　　1.添加智能App广告条：http://36kr.com/p/155243.html

　　<meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">

　　2.忽略数字自动识别为电话号码；

　　<meta name="format-detection" content="telephone=no">

　　3.忽略数字自动识别为邮箱

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

　　4.启动WebApp全屏模式；

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

　　5.添加到主屏后设置状态栏的背景颜色；

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

　　只有在 “apple-mobile-web-app-capable” content=”yes” 时生效。

  • 如果设置为 default 或 black ，网页内容从状态栏底部开始。
  • 如果设置为 black-translucent ，网页内容充满整个屏幕，顶部会被状态栏遮挡。

　　6.添加到主屏后到标题（ios6新增）

　　<meta name="apple-mobile-web-app-title" content="App Title">

　　7.ios图标；

　　图片自动处理成圆角和高光等效果。

　　<link rel="apple-touch-icon" href="path/to/apple-touch-icon.png">

　　禁止系统自动添加效果，直接显示设计原图。

　　<link rel="apple-touch-icon-precomposed" href="path/to/apple-touch-icon-precomposed.png">

　　8.启动画面（不赞成使用）

　　iPad 的启动画面是不包括状态栏区域的，iPhone 和 iPod touch 的启动画面是包含状态栏区域的；

　　<link rel="apple-touch-startup-image" href="path/to/startup.png">

　　9.IOS应用深度链接；

  1. <meta name="apple-itunes-app" content="app-id=APP-ID, app-argument=http/url-sample.com">
  2. <link rel="alternate" href="ios-app://APP-ID/http/url-sample.com">

Google Android原生浏览器

　　1.标签页选项卡色；

　　Android Lollipop 中的 Chrome 39 增加 theme-color meta 标签，用来控制选项卡颜色。

　　<meta name="theme-color" content="#db5945">

　　2.添加到主屏；

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

　　3.安卓应用深度链接（网页上唤起应用）　

  1. <!-- Android app deep linking -->
  2. <meta name="google-play-app" content="app-id=package-name">
  3. <link rel="alternate" href="android-app://package-name/http/url-sample.com">

-Apple Safari浏览器

　　Safari 10开始支持固定书签页的SVG favicons了，你可以这样使用：

  1. <!-- Pinned Site -->
  2. <link rel="mask-icon" href="path/to/icon.svg" color="red">

 -Google Chrome浏览器

　　1.关闭chrome浏览器下翻译插件；

　　<meta name="google" value="notranslate" />　　

　　2.chrome浏览器插件安装；

　　有时候，你需要在你的页面上点击某个安卓，直接安卓你的chrome浏览器插件，而不是链接到Chrome webstore 的详细地址再安装，那么你可以使用：

　　<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/APP_ID">

-Internet Explorer浏览器

　　模式设置　　

  1. //IE8以下以IE7标准模式呈现网页，而IE9则以IE9的标准模式呈现网页：
  2. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
  3. //如果安装了GCF，则使用GCF来渲染页面（"chrome=1"），
  4. //如果没有安装GCF，则使用最高版本的IE内核进行渲染（"IE=edge"）
  5. <meta http-equiv="x-ua-compatible" content="ie=edge">

总结，移动端常用的meta基本就这些了，筛选了常用的mata，如下，如有需要，可看上面的详解，再做添加。

<!DOCTYPE html>

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

<head>

    <meta charset="utf-8">

    <meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">

<!-- Apple IOS原生浏览器 -->

<!-- 添加到主屏后设置状态栏的背景颜色； -->

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

<!-- 忽略数字自动识别为电话号码； -->

    <meta name="format-detection" content="telephone=no" />

<!-- 忽略数字自动识别为邮箱 -->

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

<!-- 启动WebApp全屏模式； -->

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

<!-- 百度 -->

<!-- 通过百度手机打开网页时，百度可能会对你的网页进行转码，脱下你的衣服，往你的身上贴狗皮膏药的广告，为此可在 head 内添加 -->

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

<!-- QQ -->

<!-- 设置锁定横屏、竖屏显示模式，portrait（横屏），landscape（竖屏）-->

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

<!-- 设置全屏显示页面 -->

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

<!-- 360 -->

<!-- 设置 360 浏览器渲染模式：webkit 为极速内核，ie-comp 为 IE 兼容内核，ie-stand 为 IE 标准内核。 -->

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

<!--     360 浏览器就会在读取到这个标签后，立即切换对应的极速核。 另外为了保险起见再加入 -->

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

<!-- uc -->

<!-- 1.设置屏幕方向：portrait为横屏，landscape为竖屏； -->

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

<!-- 2.设置全屏； -->

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

    <title>Document</title>

</head>

<body>

</body>

</html>

补充：

<!-- 在页面中加入这个后，5秒钟后就会跳转到指定页面啦 -->
<meta http-equiv="Refresh" content="5;url=http://blog.csdn.net/yc123h/article/details/51356143">

参考地址：

http://www.css88.com/archives/6410?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io

http://ooxx.me/ios-webapp-viewport-meta.orz

html5 head头标签的更多相关文章

  1. [转] 移动前端不得不了解的HTML5 head 头标签

    HTML的头部内容特别多,有针对SEO的头部信息,也有针对移动设备的头部信息.而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元 素,有很多差异性.移动端的工作已经越来越成为前端工作的重要内容 ...

  2. Html5_移动前端不得不了解的html5 head 头标签

    移动前端不得不了解的html5 head 头标签   本文主要内容来自一丝的常用的 HTML 头部标签和百度FEX的HTML head 头标签. 移动端的工作已经越来越成为前端工作的重要内容,除了平常 ...

  3. 移动前端不得不了解的HTML5 head 头标签（2016最新版）

    小编推荐:掘金是一个高质量的技术社区,从 ECMAScript 6 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货.各大应用市场搜索「掘金」即可下载APP,技术干货尽在掌握. ...

  4. 移动前端不得不了解的html5 head 头标签

    本文主要内容来自一丝的常用的 HTML 头部标签和百度FEX的HTML head 头标签. 移动端的工作已经越来越成为前端工作的重要内容,除了平常的项目开发,HTML 头部标签功能,特别是meta标签 ...

  5. 【转】移动前端不得不了解的html5 head 头标签

    来源:http://blog.csdn.net/huang100qi/article/details/42596799 本文主要内容来自一丝的常用的 HTML 头部标签和百度FEX的HTML head ...

  6. 移动前端不得不了解的HTML5 head 头标签（首篇）

    HTML的头部内容特别多,有针对SEO的头部信息,也有针对移动设备的头部信息.而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,有很多差异性.移动端的工作已经越来越成为前端工作的重要内容, ...

  7. 移动前端的html5 head 头标签

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

  8. 移动前端不得不了解的HTML5 head 头标签 —— HTML基本的头部标签

    HTML的头部内容特别多,有针对SEO的头部信息,也有针对移动设备的头部信息.而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,有很多差异性.移动端的工作已经越来越成为前端工作的重要内容, ...

  9. 移动前端不得不了解的HTML5 head 头标签（中下篇）

    SEO 优化部分 页面标题<title>标签(head 头部必须)        <title>your title</title>    页面关键词 keywor ...

随机推荐

  1. bind+dlz+mysql实现区域记录动态更新

    BIND-DLZ实验:http://bind-dlz.sourceforge.net/ 实验环境:RHEL4,BIND-9.5.0-P2.tar.gz(9.4.0以上版本都已含DLZ补丁),Mysql ...

  2. UIWebView内嵌网页 Xcode7.0以后的用法

    UIWebView* webPage=[[UIWebView alloc]initWithFrame:CGRectMake(0, 0, screenWidth, screenHeight-64)]; ...

  3. nyoj17_又做最大递增子序列

    单调递增最长子序列 时间限制:3000 ms  |  内存限制:65535 KB 难度:4   描述 求一个字符串的最长递增子序列的长度 如:dabdbf最长递增子序列就是abdf,长度为4   输入 ...

  4. mysql中Access denied for user 'root'@'localhost' (using password:YES)

    关于昨天下午说的MySQL服务无法启动的问题,解决之后没有进入数据库,就直接关闭了电脑. 今早打开电脑,开始-运行 输入“mysql -uroot -pmyadmin”后出现以下错误: “Access ...

  5. C# Arraylist + struct 综合练习 枚举ENUE 递归

    枚举类型 一组常量的组合, 在不制定任何索引的情况下,默认第一个字段从0开始,之后的依次+1 在指定了某个索引的情况下,之后的依次+1 若之前定义的某字段的索引指向了之后的某个默认字段,那么他俩完全相 ...

  6. Linux中环境变量文件及配置（转载）

    一.环境变量文件介绍 转自:http://blog.csdn.net/cscmaker/article/details/7261921 Linux中环境变量包括系统级和用户级,系统级的环境变量是每个登 ...

  7. 【leetcode】Minimum Size Subarray Sum（middle）

    Given an array of n positive integers and a positive integer s, find the minimal length of a subarra ...

  8. 【linux】学习1

    郁闷啊 好多东西要学 下面大概就是鸟哥那本书的第五章内容吧 linux命令: Ctrl + Alt + F1 ~ F6 : 切换终端 ls  -al  ~ :显示主文件夹下的所有隐藏文件 date: ...

  9. Hibernate双向一对一对象关系模型映射

    一个员工一辆车:one-to-one 实现一:让汽车表中的外键唯一 create table emp ( eid int primary key auto_increment, ename varch ...

  10. JavaEE编码题

    1.请编写代码实现登录效果(5分) 要求: 1)手写出相应的HTML和CSS代码 2)字体大小12px,表格宽300px,按钮行占两列并水平居中, 3)可以写在style节点内,也可使用行内CSS或者 ...