[转载]移动版网页以及Web App的那些meta们 - 萧瑟56 - 博客园

转载移动版网页以及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 才刚刚开始—

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏