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

Meta 标签

meta标签是HTML中head头部的一个辅助性标签，它位于HTML文档头部的 <head> 和 <title> 标记之间，它提供用户不可见的信息。虽然这部分信息用户不可见，但是其作用非常强大，特别是当今的前端开发工作中，设置合适的meta标签可以大大提升网站页面的可用性。

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

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

meta标签分类

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

http-equiv：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助浏览器正确地显示网页内容。

name属性：主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于浏览器，搜索引擎等机器人识别，等等。

推荐使用的meta标签

<meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'">
    
    
    
    <meta name="application-name" content="应用名称">
    
    
    <meta name="description" content="一个页面描述">
    
    <meta name="robots" content="index,follow,noodp">
    <meta name="googlebot" content="index,follow">
    
    <meta name="google" content="nositelinkssearchbox">
    
    <meta name="google" content="notranslate">
    
    <meta name="google-site-verification" content="verification_token">
    
    <meta name="generator" content="program">
    
    <meta name="subject" content="你的网站主题">
    
    <meta name="abstract" content="">
    
    <meta name="url" content="https://example.com/">
    <meta name="directory" content="submission">
    
    <meta name="rating" content="General">
    
    <meta name="referrer" content="never">
    
    <meta name="format-detection" content="telephone=no">
    
    <meta http-equiv="x-dns-prefetch-control" content="off">
    
    <meta http-equiv="set-cookie" content="name=value; expires=date; path=url">
    
    <meta http-equiv="Window-Target" content="_value">
    
    <meta name="ICBM" content="latitude, longitude">
    <meta name="geo.position" content="latitude;longitude">
    
    <meta name="geo.region" content="country[-state]">
    
    <meta name="geo.placename" content="city/town">

为移动设备添加 viewport

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

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 中已经删除），可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写：

而如果你的网站不是响应式的，请不要使用 initial-scale 或者禁用缩放。
html 代码:
    <meta name="viewport" content="width=device-width,user-scalable=yes">
相关链接：非响应式设计的viewport
适配 iPhone 6 和 iPhone 6plus 则需要写：
html 代码:
    <meta name="viewport" content="width=375">
    <meta name="viewport" content="width=414">
大部分 4.7~5 寸的安卓设备的 viewport 宽设为 360px，iPhone 6 上却是 375px，大部分 5.5 寸安卓机器（比如说三星 Note）的 viewport 宽为 400，iPhone 6 plus 上是 414px。

不推荐的 meta 属性

<meta name="language" content="en">
    
    <meta name="keywords" content="你,关键字,在这里,不使用空格,而用逗号进行分隔">
    
    <meta name="revised" content="Sunday, July 18th, 2010, 5:15 pm">
    
    <meta name="reply-to" content="email@example.com">
    
    <meta name="author" content="name, email@example.com">
    <meta name="designer" content="">
    <meta name="owner" content="">
    
    <meta name="revisit-after" content="7 days">
    
    
    <meta http-equiv="refresh" content="300; url=https://example.com/">
    
    <meta name="topic" content="">
    
    <meta name="summary" content="">
    
    <meta name="classification" content="business">
    
    <meta name="identifier-URL" content="https://example.com/">
    
    <meta name="category" content="">
    
    <meta name="coverage" content="Worldwide">
    
    <meta name="distribution" content="Global">
    
    <meta http-equiv="Pics-label" content="value">
    
    
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">