如何使用meta标签

正在努力的团子
193 阅读8分钟

meta标签的作用

<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。那些不能用其他标签元素表示的信息就放在meta标签中。<meta>元素可用于提供 名称 - 值 对形式的文档元数据，name属性为元数据条目提供名称，而content属性提供值。

<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

meta标签的属性：

  • charset

规定 HTML 文档的字符编码。

常用值：

  • UTF-8 Unicode 的字符编码
  • ISO-8859-1 拉丁字母的字符编码

理论上，可以使用任何字符编码，但没有浏览器能够理解所有编码。字符编码使用得越广泛，浏览器理解它的机会就越大。

<head>
  <meta charset="UTF-8">
</head>

  • content

    这个属性包含http-equiv 或name属性的值。

  • name

    name 和 content 属性可以一起使用，以名 - 值对的方式给文档提供元数据，其中 name 作为元数据的名称，content 作为元数据的值。

    HTML规范定义的标准元数据名称：

    • application-name：网页中所运行的应用程序的名称
    • author：文档作者的名字。
    • description：一段简短而精确的、对页面内容的描述。
    • generator：生成此页面的软件的标识符（identifier）。
    • keywords：与页面内容相关的关键词，使用逗号分隔。
    • referrer：控制由当前文档发出的请求的 HTTP Referer 请求头
    • no-referrer：不发送 HTTP Referer请求头。
    • origin：只发送当前文档的 origin
    • no-referrer-when-downgrade：如果请求目标与当前页面一样安全或者更加安全（HTTP(S)→HTTPS），则发送完整 URL；如果请求目标更加不安全（HTTPS→HTTP），则不发送 referrer。这是默认行为。
    • origin-when-cross-origin：对同源请求发送完整 URL（不含 URL 参数），其他情况下，只发送 origin。
    • same-origin：对同源请求发送完整 URL（不含 URL 参数），其他情况下，请求不包含 referrer 请求头。
    • strict-origin：如果请求目标与当前页面一样安全或者更加安全（HTTP(S)→HTTPS），则发送 origin；如果请求目标更加不安全（HTTPS→HTTP），则不发送 referrer。
    • strict-origin-when-cross-origin：对同源请求发送完整 URL（不含 URL 参数）；其他情况下，如果请求目标与当前页面一样安全或者更加安全（HTTP(S)→HTTPS），则发送 origin；如果请求目标更加不安全（HTTPS→HTTP），则不发送 referrer。
    • unsafe-URL：对同源请求和跨源请求发送完整 URL（不含 URL 参数）。
    • viewport: 为viewport视口的初始大小提供指示。目前仅用于移动设备。

  • http-equiv

    这个属性可以被称作http响应头、http文件头，当浏览器请求某个文件时，首先会加载此响应（文件）头内的设置，可以使用该属性模拟HTTP响应头。因此所有允许的值都是特定 HTTP 头部的名称，如下：

    • content-security-policy 它允许页面作者定义当前页的内容策略 (en-US)。内容策略主要指定允许的服务器源和脚本端点，这有助于防止跨站点脚本攻击。

    • content-type 如果使用这个属性，其值必须是"text/html; charset=utf-8"。

    • default-style 设置默认 CSS 样式表组的名称。

    • x-ua-compatible 如果指定，则 content 属性必须具有值 "IE=edge"。用户代理必须忽略此指示。

    • refresh 这个属性用于设置自动刷新：

      • 如果 content只包含一个正整数，则为重新载入页面的时间间隔 (秒)；
      • 如果content包含一个正整数，并且后面跟着字符串 ';url=' 和一个合法的 URL，则是重定向到指定链接的时间间隔 (秒) 无障碍相关考虑，设置了 refresh 值的页面可能有时间间隔太短的风险。

使用语法：

 ＜meta http-equiv=”参数” content=”参数变量值”＞
 
 使用示例：
 2秒后自动重定向到新地址
 ＜meta http-equiv="refresh" content="2；URL=http://www.baidu.com/"＞
 清除缓存
<meta http-equiv="cache-control" content="no-cache"> 
缓存有效期
<meta http-equiv="expires" content="0">
设置页面类型及字符集
＜meta http-equiv="content-Type" content="text/html; charset=gb2312"＞

meta viewport 是做什么用的，怎么写？

meta viewport用于响应式布局时适配移动端屏幕。如：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

移动端适配的目的是在不同尺寸的设备上，页面达到合理的展示（自适应）或者说是能够保持统一效果。

在页面布局中需要了解的几个单位：

  • 设备像素 / 物理像素（physical pixels）

是指屏幕的实际物理像素点，是设备能控制显示的最小单位，我们可以把它看做显示器上的一个点，比如 iPhone6 Plus 是 1920*1080 的像素分辨率，那么代表它纵向有 1920 个物理像素点，横向有 1080 个物理像素点。

  • CSS 像素（css pixel） / 设备独立像素/密度独立像素（density independent pixels - dip）

CSS 像素是 web 编程中的概念，是抽象的，实际上不存在的。它是独立于设备用于逻辑上衡量像素的单位，所以又叫密度独立像素。也就是我们做网页时用到的css像素单位。

  • 屏幕尺寸

指屏幕的对角线长度，单位是英寸（inch），1 英寸 = 2.54 厘米。常见屏幕尺寸有 5.0、5.5 和 6.0 等。

  • 屏幕像素密度（pixels per inch - ppi）

指屏幕上每英寸可以显示的物理像素点的数量。比如 iPhone6 Plus 是 5.5 英寸，分辨率（也就是物理像素）是 1920*1080 像素，那么它的 ppi = √(1920^2+1080^2) / 5.5 ≈ 401ppi 。PPI值越高，画质越优秀。

  • 设备像素比

指设备像素和设备独立像素的比值。
可以通过 window.devicePixelRatio 获得，该属性被所有WebKit浏览器以及Opera所支持。

1 CSS pixels = （devicePixelRatio）^2 * device pixels

  • viewport

是指 web 页面上用户的可见区域。

viewport 的大小是和设备相关的，在移动端例如手机上，viewport 的大小是比 PC 端要小的，一般无论手机还是平板，默认的 viewport 大小都是 980px 。
刚开始 web 页面仅仅是在 PC 端进行查看的，但是后来随着移动互联网的发展，越来越多的 web 访问是通过移动端进行的，但是因为 PC 的 viewport 要比移动端大，所以为了快速修复这个问题，移动端的浏览器默认只是把整个页面等比例缩小到移动端的 viewport 大小。

这样做的后果就是，用户看到的是一个缩小版的整个页面，字体、图标和内容等等都非常小，想要点击或者查看都需要去放大页面进行操作，放大页面之后就会出现横向滚动条，这对用户体验来说是非常不好的。

因此我们使用如下标签解决：

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

device-width 是指这个设备最理想的 viewport 宽度。iPhone6 之前的 device-width 都是 320px ，iPhone6 是 375px ，而这个 device-width 是和 CSS像素（也叫密度独立像素 dip）是相同的。也就是说，web 页面中的 CSS像素的值等于 device-width 时，对应到手机上就是占满全屏的宽度，页面的宽度就会跟设备宽度一致

安卓手机的 device-width 有320px、360px 和 384px 等等，不同的设备 device-width 是不一样的。

initial-scale=1.0 是指初始化的时候缩放大小是1，也就是不缩放。

user-scalable=0 是指禁止用户进行缩放。

maximum-scale=1.0 是指用户最大缩放大小是1，其实在禁止用户缩放以后，这一句可以省略。

在设计人员为移动端设计页面的时候经常可以听到2倍图和3倍图这些词语，这又是什么意思呢，我们以 iPhone6 举例：

iPhone6 的分辨率（也就是物理像素）是 1334*750 像素，它的 device-width 是 375px 。

如果我们将屏幕横向分成 375 份，CSS 中 1px 占用的1份，因为屏幕就那么大，CSS中 width 等于 375px 时横向就会占满全屏，但是实际上存在的物理像素点横向是750个 ，所以在我们写 CSS 时 1px 对应到屏幕上是占用了2个物理像素点。

如果我们不写 width=device-width 这一句的话，默认 viewport 宽是 980px 。那么把 iPhone6 的屏幕横向分成980份，CSS 中 1px 占用1份，但是真正的像素点横向只有750个，这就意味着，实际上渲染出来的宽度是 75/98 个像素大小（只是理论上）。

参考资料：

设备像素，CSS像素，设备独立像素

meta viewport

标准元数据名称

移动端适配方案

avatar
文章
阅读
粉丝