Html=>Head=>meta

如今智能机遍布大街小巷，所以，如今的前端攻城师们要大 跨步的迈向移动互联网了，更何况Web App也应用广泛，可能原理还一样，但是一定会有新的东西出现，那就从“头”开始，看看头部那些Meta的新玩意。

1、

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

这是一个移动端最常用的meta，定义页面的缩放，如上代表宽度以终端宽度为准，并且不允许用户缩放，更多属性如下：width -- 宽度（范围从200到10,000，默认为980像素/device-width缩放至终端宽度）height -- 高度（范围从223到10,000）initial-scale -- 初始的缩放比例 （范围从 > 0 到 10）minimum-scale -- 允许用户缩放到的最小比例maximum-scale -- 允许用户缩放到的最大比例user-scalable -- 用户是否可以手动缩放 (no，yes)target-densitydpi -- dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi 定义为每英寸点的数量（dpi）2、 禁止把数字转化为拨号链接

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

3、 禁止把邮箱地址作为邮件发送

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

4、 隐藏浏览器的工具栏和菜单栏，看到apple了吧，对iso系统起用

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

5、默 认值为 default（白色），可以定为black（黑色）和black-translucent（灰色半透明），需要说明的是值为“black- translucent”将会占据页面位置，浮在页面上方（会覆盖页面 20px高度 iphone4和itouch4的Retina屏幕为40px）

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

6、 "添加到主屏幕“后，全屏显示

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

介于说到了“头”，也说到了Web App，那就捎带说说两个苹果私有link，

1、

<link rel="apple-touch-icon-PRecomposed" href="iphone_logo.png" sizes="72x72" />

这个 link 就是设置 Web App 的放置主屏幕上 icon 文件路径，href就是你ico的文件路径，sizes可以根据不同分辨率，对应不同的图片，尺寸如下:

IOS设备	最适尺寸(px)
iPhone 和 iTouch	57 x 57
retina iPhone 和 retina iTouch	114 x 114
iPad	72 x 72
retina iPad	144 x 144

如果没有指明 <sizes> 属性的大小，则默认值为57×57。如 果所有的 <link> 标签序列中都没有符合官方推荐的最适尺寸的话，那么IOS会从所有比推荐的最适尺寸大的图标中选择尺寸最小的那一个，如果所有的 <link> 标签序列中的图标都比当前推荐的最适尺寸小的话，IOS会从这些图片中自动选择最大的那个来作为启动图标。如果整个页面都没有指定任何的 apple-touch-icon 的图标的话，IOS则会自动去网站根目录寻找有 apple-touch-icon 和 apple-touch-icon-precomposed 前缀的图标文件。2、

<link rel="apple-touch-startup-image" href="logo_startup.png" media="(device-width: 320px)" />

这个 link 就是设置启动时候的界面，可用媒体查询调用不同图片