桌面端开发中，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. ios7 上 UIActivity 用的image

    在ios8 上UIActivityCategoryShare类型的UIActivity的图标支持彩色图片了,但是在ios7上不行,ios8上的 UIActivityCategoryAction类型也不 ...

  2. php调用c/c++的一种方式

    php调用c/c++有很多方式,最常用的是通过tcp或者http去调用,通过发送请求去调用c/c++编写的cgi/fastcgi来实现,另外php还有一种直接执行外部应用程序的方式,这种方式会影响到系 ...

  3. windows8 安装TortoiseSVN后的反应

    因为工作需要,昨天安装了TortoiseSVN 64位版,没有马上重启. 随后,IIS中打开页面后浏览器一片空白,没有网页,没有地址,什么都没有.这时还没想到可能是TortoiseSVN的问题.后来实 ...

  4. Java for LeetCode 226 Invert Binary Tree

    Invert a binary tree. 4 / \ 2 7 / \ / \ 1 3 6 9 to 4 / \ 7 2 / \ / \ 9 6 3 1 Trivia: This problem wa ...

  5. Android 支付宝以及微信支付快速接入流程

    简介 随着移动支付的普及,越来越多的App采用第三发支付,在这里我们以支付宝为例,做一个快速集成! 一.Android快速实现支付宝支付 1.首先,我们需要前往支付宝开放平台,申请我们的支付功能:ht ...

  6. 【EM】C++代码实现

    看了原理和比人的代码后,终于自己写了一个EM的实现. 我从网上找了一些身高性别的数据,用EM算法通过身高信息来识别性别. 实现的效果还行,正确率有84% (初始数据 男生170 女生160 方差都是1 ...

  7. You know元音字母吗？

    所谓元音字母,或者母音字母,就是语言里起着发声作用的字母.在英语中,A.E.I.O.U属于元音字母,其中U是半元音开音节和闭音节为数不多的5个元音字母看似简单,他们却能像变戏子一样跟辅音组合拼读成不同 ...

  8. NodeVisitor的使用-遍历Geode节点并在它与父节点之间添加一个LOD节点

    #include <osg\NodeVisitor>#include <osg\MatrixTransform>#include <osg\PagedLOD>#in ...

  9. 导出 SQL SERVER 表中数据为脚本

    ALTER PROCEDURE [dbo].[Usp_OutputData] @tablename sysname, @outputIdentitycolumn int AS declare @col ...

  10. @RequestMapping详解

    简介: @RequestMapping RequestMapping是一个用来处理请求地址映射的注解,可用于类或方法上.用于类上,表示类中的所有响应请求的方法都是以该地址作为父路径. RequestM ...