基础篇｜meta标签到底是什么？

把meta标签从HTML的内容当中单独拿出来写，是因为相对于其他html内容来说meta更特殊一些，它和link一样都不会在页面直接显示，但在实际开发当中的作用确是非同小可。

属性与示例

meta标签有自己的属性，属性的每个值有不同的应用场景：

• charset：文档字符编码

    <!--声明文档使用的字符编码-->
    <meta charset="utf-8">

• name：最常用的属性，用来定义数据类型，配合content提供内容
  • decription：页面描述

      <!--页面描述，content不得超过150个字符-->
      <meta name="description" content="内容不超过150个字符" />
  

  • keywords：页面关键词

      <!--页面关键词，content可以为空，多个关键词使用逗号隔开-->
      <meta name="keywords" content="" />
      <meta name="keywords" content="html,css,javascript" />
  

  • author：网页作者

      <!--网页作者-->
      <meta name="author" content="xxx" />
  

  • viewport：为移动端设备添加

      // width 设置viewport宽度，整数或者时字符串‘device-width’
      // device-width 指设备宽度
      // initial-scale 默认缩放比例，值为数字，可以是小数
      // minimum-scale 允许用户可操作的最小缩放比例，值为数字，可以是小数
      // maximum-scale 允许用户可操作的最大缩放比例，值为数字，可以是小数
      // user-scalable 是否允许手动缩放
      <meta name="viewport" content="width=device-width, initial-sacle=1.0, minimum-scale=1.0,maximum-scale=1.0, user-scalable=no" />
  

  • 其他

      <!--指定搜索引擎抓取爬虫规则，值为all/none/index/follow-->
      <meta name="robots" content="index,follow" />
      <!--设置苹果工具栏颜色-->
      <meta name=”format-detection” content=”telphone=no, email=no”/>
  

• content：填写具体内容，可以跟name或http-equiv搭配，通常用于SEO、移动端适配和控制浏览器行为，多个值时用,隔开
• http-equiv：模拟http头部，控制浏览器行为：
  • Cache-Control：缓存策略

  <!--优先使用 IE 最新版本和 Chrome-->
  <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>   
  <meta http-equiv="Cache-Control" content="no-cache" />
  <!--避免IE使用兼容模式-->
  <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>     
  

  • X-UA-Compatible：指定IE渲染模式

  <!--优先使用 IE 最新版本和 Chrome-->
  <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>  
  <!--避免IE使用兼容模式-->
  <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>     
  

  • Refresh：页面自动刷新时间或跳转，单位是秒

  <!--页面5s之后跳转至指定url-->
  <meta http-equiv="Refesh" content="5;URL=http://xxx.com"/"> 
  

实用场景

1. 实现一个类似PPT自动播放的效果，在不使用javascript定时器控制页面跳转方案的情况下，可以通过meta标签来实现

    <!--设置每个页面的meta标签，指定时间后跳转-->
    <meta http-equiv="Refesh" content="5;URL=page2.html"/"> 

2. 每隔一分钟需要刷新一次的大屏幕监控也可以用meta标签，去掉后面的url即可：

    <!--设置每个页面的meta标签，指定时间后跳转-->
    <meta http-equiv="Refesh" content="60"/"> 

3. 怎么处理移动端1px被渲染成2px的问题：

   • 局部处理：
     • meta标签中的viewport属性，initial-scale设置为1
     • rem按照设计稿标准走，外加利用transform的scale(0.5)缩小一倍即可；
   • 全局处理：
     • meta标签中的viewport属性，initial-scale设置为0.5
     • rem按照设计稿标准走

   以上就是meta标签的基本属性、用法及日常工作中经常遇到的问题，不足之处欢迎补充。