HTML meta 详解

2020-04-16 08:15:30易采站长站整理
Googlenocache和noarchive同义Bing

viewport

提供了关于viewport初始大小的大小的提示。仅供移动设备使用。

content取值描述
width整数或device-width定义viewport的像素宽度,或允许viewport适应设备的屏幕宽度。
height整数或device-height定义viewport的高度。没有任何浏览器使用(???)
initial-scale0.0 – 10.0定义设备宽度(纵向模式下的设备宽度或横向模式下的设备高度)与viewport大小之间的比例。
maximum-scale0.0 – 10.0定义最大的缩放级别。它必须大于或等于minimum-scale,否则视为未定义。浏览器设置可以忽略此规则,iOS10 +默认情况下忽略它。
minimum-scale0.0 – 10.0定义最小的缩放级别。它必须小于或等于maximum-scale,否则视为未定义。浏览器设置可以忽略此规则,iOS10 +默认情况下忽略它。
user-scalableyes 或 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=’https://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"/>

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