Meta 整理

基本属性值

meta的意义取决其属性:

  1. name: 文档级别的元数据,作用于整个页面。
  2. http-equiv: 程序指令,一般用于告诉服务器页面的一些特殊要求。
  3. charset: 设置页面的字符
  4. itemprop: 自定义的元数据

如果设置了 name 或者 http-equiv,可以用content指定相关的内容

一 name

  1. author: 定义页面的作者

    1
    <meta name="author" content="author name" />
  2. description: 页面简短精确的描述,有些浏览器会以此作为收藏时的描述,不超过150字

    1
    <meta name="description" content="descriptions" />
  3. keywords:描述页面的关键字, 多个关键字用 逗号分割

    1
    <meta name="keywords" content="page keyword" />
  4. viewport: 窗口视图大小设置,适用于移动端开发。

    content可以包含的属性:

    • width: 设置视图大小,数值/device-width
    • height: 设置视图高度,数值/device-height
    • initial-scale:初始缩放,值在0.0~10.0间
    • maximum-scale: 最大缩放比例,值在0.0~10.0间
    • minimum-scale: 最小缩放比例,值在0.0~10.0间
    • user-scalable: 布尔值,是否允许缩放页面
    1
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
  5. format-detection: 格式检测

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

二 http-equiv

  1. refresh: 页面重新加载或者重定向

    • 如果content只有一个数值,表示隔多少秒重新加载页面
    • 如果content格式是3;url=http://www.baidu.com表示隔3s重定向到百度
    1
    2
    <meta http-equiv="refresh" content="4" />
    <meta http-equiv="refresh" content="3;url=http://www.baidu.com" />
  2. default-style: 页面默认样式,content是css的链接,同<link>href保持一致

三 其他一下meta头

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!--隐藏状态栏/设置状态栏颜色, content的值为default | black | black-translucent-->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="标题">

<!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 关于X-UA-Compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->
<meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 -->
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->

<!-- 转码申明:用百度打开网页可能会对其进行转码(比如贴广告),避免转码可添加如下meta -->
<meta http-equiv="Cache-Control" content="no-siteapp" />

四 参考

  1. 常用meta整理
  2. MDN