移动端——meta标签

meta标签主要辅助HTML结构层的。meta标签不管在互联网前端还是在移动端都起了很重要的作用。

<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

这是一个HTML5为语言标准的说明文档。

1、第一组meta标签，比较常见。它表明的意思是它的内容是html文档，且网页编码采用的是utf-8编码。utf-8编码主要针对是简体中文和英文。正确的编码定义很有必要。否则会导致网页上的文字变成乱码。

2、第二组meta标签就是移动端特属的标签了。

意思是它是一个视图窗口，其视图窗口内容的宽度等于移动端设备的默认宽度；inital-scale表示的初始的缩放比例，一般设置为1.0倍；maximum-scale=1.0表示的允许用户缩放的最大比例；user-scalable=no表示支持用户手动进行页面缩放。

3、第三、四组meta标签都是针对IOS系统的专属标签。

3.1 第三组意思是是否启动 webapp功能，就是当点击网页添加至主屏幕功能时，会在主屏幕上生成一个图标，点击该图标会进入webapp功能，就是模拟本地应用的模式来浏览web页面。

生成的图标可以自定义，启动webapp时的开始时的图片也可以定义，这个是link标签的作用，在后续介绍标签时单独说明。

3.2 第四组表示的是当启动 webapp功能时，显示手机信号、时间、电池的顶部导航栏的颜色。

默认值为 default （白色），可以定为 black （黑色）和 black-translucent （灰色半透明）。具体值根据实际页面设计的主题色搭配进行设置。