转载移动版网页以及Web App的那些meta们 – 萧瑟56 – 博客园.
移动版网页以及Web App的那些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、
<meta name="apple-mobile-web-app-capable" content="yes" />
隐藏浏览器的工具栏和菜单栏,看到apple了吧,对iso系统起用
5、
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
默 认值为 default(白色),可以定为black(黑色)和black-translucent(灰色半透明),需要说明的是值为“black- translucent”将会占据页面位置,浮在页面上方(会覆盖页面 20px高度 iphone4和itouch4的Retina屏幕为40px)
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 就是设置启动时候的界面,可用媒体查询调用不同图片
Web App 才刚刚开始—