meta

meta中有这样几个常用属性：http-equiv，name，content，包括html5新添加的charset。

注意：content属性用来存储meta信息的内容，所有的主流浏览器都支持它，但它一般很少单独使用，我们一般使用http-equiv或者name来定义content属性信息（或者值）的名称，http-equiv和name在一个meta中通常只能用其中一个。

现详情常用的，再详情少量其它的。

name常见的有：

application-name // 代表web应用程序的名字author // 规定文档作者的名字description // 对页面的形容，SEO需要用到keywords // 页面的关键字词，多个用逗号隔开，SEO需要用到

编码格式

<meta charset="utf-8">

视窗宽度

<meta name="viewport" content="width=device-width, inital-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

• width：用于设置视窗口的宽度，可以设置为device-width（设施的宽度），也可以是自己设置的值。
• initial-scale：用于设置缩放比例，可以是任意数值的比例。
• minimum-scale：用于设置最小缩放比例。
• maximum-scale：用于设置最大缩放比例。
• user-scalable：用于设置能否禁止客户缩放页面。

自动识别

<meta name="format-detection" content="telphone=no">

• telphone：能否禁止浏览器识别页面中的电话号码。no：禁止，yes不禁止
• eamil：能否就职浏览器识别页面中的邮件地址。no：禁止，yes不禁止

用http-equiv于模拟一个 HTTP 响应头

我们都知道，HTML4.0.1定义html文档的编码方式是如下面这样：

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

但是在HTML5中我们可以像下面这样定义：

<meta charset="utf-8">

那么它除了这样的使用场景外，还有别的少量吗。假如你强制刷新页面，可以驶入像下面这样的代码：

<meta http-equiv="refresh" content="3">

如上面的代码的意思是：强制浏览器每3秒刷新一次。但要慎用。

当然，还有少量其余的好用的效果，假如你想要给应用定义多套样式，而后根据客户选择来加载不同的样式，你可以将http-equiv设置为default-style，而后你设置content的值为link或者style的对应值。具体可参考如下代码：

<meta http-equiv="default-style" content="s1"><style title="s1">body {  background: red;}</style><style title="s2">body {  background: green;}</style>

以前，我不知道style或者link中增加title有什么用，但上面的例子是它的一个用途。

针对苹果设施的设置

// 下面代码来自天猫移动web<meta name="apple-mobile-web-app-capable" content="yes"/> // 可以让app运行于全屏模式<meta name="apple-mobile-web-app-title" content="TMALL"/> // 可以让app的标题不同于页标题<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/> // 配置app的状态栏，能设置为default, black, 和 black-translucent。

状态栏设置，可参考Changing The iOS Status Bar Of Your Progressive Web App

当然，我们也可以设置书签或者者快捷键的图标。可参考如下代码：

<link href="https://placehold.it/72"          sizes="72x72"          rel="apple-touch-icon-precomposed">

可以根据不同的型号设施，来设置不同的sizes。

也可以设置它的启动背景图。可参考如下代码：

<link href="https://placehold.it/1496x2048"          media="(device-width: 768px) and (device-height: 1024px)                 and (-webkit-device-pixel-ratio: 2)                 and (orientation: landscape)"          rel="apple-touch-startup-image">

当然，我们也可以设置其它的meta，用来控制不同浏览器的行为，也可以控制不同搜索引擎的行为。

其余meta的使用

可参考gethead meta 或者 模拟原生IOS效果。

其余的内容可关注我的github