html5 head头标签

2022-08-13 08:54:20

桌面端开发中，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 内添加

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

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

<meta name="x5-orientation" content="portrait|landscape">
<meta name="x5-fullscreen" content="true">
<meta name="x5-page-mode" content="app">

-360

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

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

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

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

-UC

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

　　2.设置全屏；

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

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

　　4.排版模式；

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

　　5.夜间模式；

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

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

　　6.整页图片强制显示；

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

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

　　7.开启应用模式；

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

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

-Apple IOS原生浏览器；

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

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

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

　　4.启动WebApp全屏模式；

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

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

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

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

　　7.ios图标；

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

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

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

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

　　9.IOS应用深度链接；

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

Google Android原生浏览器

　　1.标签页选项卡色；

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

　　2.添加到主屏；

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

<meta name="google-play-app" content="app-id=package-name">
<link rel="alternate" href="android-app://package-name/http/url-sample.com">

-Apple Safari浏览器

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

<link rel="mask-icon" href="path/to/icon.svg" color="red">

-Google Chrome浏览器

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

　　2.chrome浏览器插件安装；

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

-Internet Explorer浏览器

　　模式设置　　

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

补充：

<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

码农公寓

meta标签分类

相关文章