HTML meta 详解

时间：2017-08-17

值	content取值	描述
width	整数或device-width	定义viewport的像素宽度，或允许viewport适应设备的屏幕宽度。
height	整数或device-height	定义viewport的高度。没有任何浏览器使用（？？？）
initial-scale	0.0 - 10.0	定义设备宽度（纵向模式下的设备宽度或横向模式下的设备高度）与viewport大小之间的比例。
maximum-scale	0.0 - 10.0	定义最大的缩放级别。它必须大于或等于minimum-scale，否则视为未定义。浏览器设置可以忽略此规则，iOS10 +默认情况下忽略它。
minimum-scale	0.0 - 10.0	定义最小的缩放级别。它必须小于或等于maximum-scale，否则视为未定义。浏览器设置可以忽略此规则，iOS10 +默认情况下忽略它。
user-scalable	yes 或 no	如果设置为no，用户将无法放大网页。默认值为yes。浏览器设置可以忽略此规则，iOS10 +默认情况下忽略它。

常见用法

禁止缩放：

<meta name=”viewport” content=”initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”/>

自动刷新网页

你可以设置一段时间后对页面进行刷新操作。meta http-equiv=”refresh”可以指定浏览器延迟一段时间自动刷新页面。下面的meta-tag指定浏览器每5秒自动刷新一次。

<meta http-equiv=”refresh” content=”5″ />

自动重定向

我们可以使用refresh meta标签对页面进行重定向。下面的例子将在5秒后访问www.jb51.net

<meta http-equiv=”refresh” content=”5;url=’http://www.jb51.net’” />

禁止浏览器缓存

当我们在本地测试网页的时候，没有及时更新新内容，可能就是有浏览器缓存。这个时候，我们只要通过使用Meta标签禁用浏览器缓存，可以解决。通用代码如下：

<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">

禁止百度转码

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

在移动开发当中，屏蔽数字当作电话号码的代码：

<meta content=”telephone=no” name=”format-detection” />

参考

MDN HTML element（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta）

上一篇：HTML标签meta总结,HTML5 head meta 属性整理 下一篇：HTML基础控件介绍_动力节点Java学院整理