移动端的meta标签

meta 标签分两大部分

1. HTTP 标题信息（http-equiv）
2. 页面描述信息（name）

http-equiv 属性

Content-Type 值（显示字符集的设定）

说明：设定页面使用的字符集，用以说明主页制作所使用的文字语言，浏览器会根据此来调用相应的字符集显示 page 内容。

用法：<metahttp-equiv="Content-Type"content="text/html; charset=utf-8" />

name 属性

1.viewport 值（移动屏幕的缩放）

什么是viewport呢？

viewport即可视区域，对于桌面浏览器而言，viewport指的就是除去所有工具栏、状态栏、滚动条等等之后用于看网页的区域，这是真正有效的区域。由于移动设备屏幕宽度不同于传统 web，因此我们需要改变 viewport 值。 
实际上我们可以操作的属性有 6个：

width: viewport 的宽度 （范围从 200 到 10,000 ，默认为 980 像素 ）
height: viewport 的高度 （范围从 223 到 10,000 ）
initial-scale: 初始的缩放比例 （范围从>0到 10 ）
minimum-scale: 允许用户缩放到的最小比例
maximum-scale: 允许用户缩放到的最大比例
user-scalable: 用户是否可以手动缩放(no，yes)

用法：<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” />

说明：

• 强制让文档与设备的宽度保持 1:1 ；
• 文档最大的宽度比列是1.0（ initial-scale 初始刻度值和 maximum-scale 最大刻度值）；
• user-scalable 定义用户是否可以手动缩放（ no 为不缩放），使页面固定设备上面的大小；

注意：实际测试中发现，有些安卓系统自带的浏览器并不支持这一条规则，能够对页面进行放大，一旦放大相应的 box 也随之放大，导致页面出现错乱问题。

解决方法：定义页面的最小宽度

body{

min-width:320px;

}

对于这些属性，我们可以设置其中的一个或者多个，并不需要你同时都设置，iPhone 会根据你设置的属性自动推算其他属性值 ，而非直接采用默认值。

如果你把initial-scale=1 ，那么 width 和 height在竖屏时自动为320*356 （不是320*480 因为地址栏等都占据空间 ），横屏时自动为 480*208。类似地 ，如果你仅仅设置了 width ，就会自动推算出initial-scale 以及height。例如你设置了 width=320 ，竖屏时 initial-scale 就是 1 ，横屏时则变成 1.5 了。 那么到底这些设置如何让 Safari 知道 ？其实很简单 ，就一个 meta ，形如 ：

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” />

2.format-detection 值（忽略页面中的数字识别为电话号码）

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

说明：

• 使设备浏览网页时对数字不启用电话功能（不同设备解释不同，iTouch 点击数字为存入联系人，iPhone 为拨打电话），忽略将页面中的数字识别为电话号码。
• 若需要启用电话功能将 telephone=yes 即可，若在页面上面有 Google Maps, iTunes 和 YouTube 的链接会在ios设备上打开相应的程序组件。

3、apple-mobile-web-app-capable 值（网站开启对 web app 程序的支持）

<metaname="apple-mobile-web-app-capable"content="yes" />

这meta的作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时，这个行meta就不用加了，默认就是显示。

iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；

4、apple-mobile-web-app-status-bar-style 值（改变顶部状态条的颜色）

<meta name=”apple-mobile-web-app-status-bar-style” content=”default” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”black” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”black-translucent” />
 作用是控制状态栏显示样式

说明：

• iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；
• 默认值为 default（白色），可以定为 black（黑色）和 black-translucent（灰色半透明）；

5.author值（设置作者姓名及联系方式）

<metaname="author"contect="name,email" />

苹果 Web App 其他设置

1.APP图标

<linkrel="apple-touch-icon-precomposed"href="iphone_logo.png" />

说明：这个 link 就是设置 Web App 的放置主屏幕上 icon 文件路径（图片四）。 
使用： 
- 该路径需要注意的就是放到将网站的文档根目录下但不是服务器的文档的根目录。 
- 图片尺寸可以设定为 57*57（px）或者 Retina 可以定为 114*114（px），iPad 尺寸为 72*72（px）

2.APP启动动画

<linkrel="apple-touch-startup-image"href="logo_startup.png" />

使用：

• 放置的路径和上面一样。
• 官方规定启动界面的尺寸必须为 320*640（px），原本以为 Retina 屏幕可以支持双倍，但是不支持，图片显示不出来。