Meta标签

1. format-detection

格式检测。用来检测 html 里的一些格式，主要有以下几个设置：

<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
<meta name="format-detection" content="adress=no">

或写成：

<meta name="format-detection" content="telephone=no,email=no,adress=no">

• telephone

  设置是否自动将页面内数字转化为拨号链接。no - 禁止把数字转化为拨号链接；yes-开启。默认开启
  

• email
  设置是否自动识别页面内的邮箱地址。no - 禁止作为邮箱地址，点击之后不自动发送；yes - 开启。默认开启

• adress

  设置是否自动识别地址。no - 禁止跳转至地图；yes - 开启。开启
  

2. charset

<meta charset="utf-8" />

utf-8 是一种字符编码。常见的字符编码有：gb2312、gbk、unicode、utf-8。

charset="utf-8" 是告知浏览器当前页面是什么字符编码格式。

3. viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui, user-scalable=no">

属性名	说明
width	设置 layout viewport 的宽度，为一个正整数，使用字符串”width-device”表示设备宽度
initial-scale	设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale	允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale	允许用户的最大缩放值，为一个数字，可以带小数
height	设置layout viewport 的高度，这个属性对我们并不重要，很少使用
user-scalable	是否允许用户进行缩放：no - 不允许，yes - 允许
target-densitydpi	值可以为一个数值或 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个

在移动端中，css 中的 1px 并不等于物理上的 1px。

移动前端开发之viewport的深入理解
移动前端开发之viewport的深入理解

4. apple-mobile-web-app-capable

<meta name="apple-mobile-web-app-capable" content="yes">

yes - 不显示默认的苹果工具栏和菜单栏；no-显示。默认值为 no。

如果 content 设置为 yes，Web 应用会以全屏模式运行，可以通过只读属性 window.navigator.standalone 来确定网页是否以全屏模式显示。

5. apple-touch-fullscreen

<meta name="apple-touch-fullscreen" content="yes">

添加到主屏幕后，全屏显示。

6. apple-mobile-web-app-status-bar-style

<meta name=”apple-mobile-web-app-status-bar-style” content=black” />

设置状态栏的样式。default -白色（默认值）；black - 黑色；black-translucent 灰色半透明。

注意：当值为“black-translucent”时会占据页面px位置，浮在页面上方（会覆盖页面 20px 高度，Retina 屏幕为40px）。