ios6为前端webapp带来了什么（转）

ios6为前端webapp开发者带来了什么，第一时间同步体验更新

2012-09-20

questions of science,science and progress...

美国时间9月19日，中国时间9月20日，我更新到了ios6，第一时间没有去调戏会普通话的Siri，而是着手研究和校验ios6和它的safari都为webapp开发者或者前端开发者带来了哪些便利和好处，请注意本文的发表时间，本文是第一时间放出人肉体验测试的结果哦！

1.通过pc或者mac调试手机上的safari

ios6的到来，手机上safari没有开发人员调试工具的现状成为历史了，习惯后的朋友可以放弃用chrome模拟调试的日子了。

简单说来，ios6允许你通过pc或者mac上的safari的开发人员工具来调试ios设备上的safari网页

下面说一下步骤：

1>首先更新你的ios设备到ios6，然后更新mac或者pc上的safari浏览器到最新版

2>打开ios设备的，点击主屏幕上的“设置”，然后“Safari”，然后滚屏到最下面， 进入“高级”，打开“web检查器”（设置->Safari->高级），如下图所示：





3>打开ios设备上的Safari，输入需要调试的页面地址并载入页面

4>用usb电缆将ios设备链接到电脑，打开mac或者pc上更新好的Safari

5>在mac或者pc上的Safari中选择“开发”，然后选到自己的ios设备，在三角划出的右边选择需要调试的网页，如下图所示：





6>点击鼠标，即可打开开发人员工具，调试ios设备上的网页，如下图所示：





2.UI细节变化

通过肉眼对比，发现了这样一些细节变化，有一些是开发人员需要注意的，有一些则无关紧要

1>顶部栏变成了黑色底色

2>横屏时有了一个全屏按钮，可以全屏看网页

3>地址栏的搜索内搜索提供商的字样被换成了“搜索”2个字

4>底部的选项按钮（见图），有了更多的选项

如下图所示：





4中的更多选如下图所示：





3.新支持的css滤镜特性

ios6的Safari终于支持css3滤镜了，下面的代码在ios设备上终于可用了

1	-webkit-filter:****

4.新增为你的网站对应的原生应用的提示条smart app banner

这种提示条广告会出现在你的移动版网页上。当用户在移动设备上打开你的网页，如果你的站点在App Store中有提交原生的App，这个条幅将会提示用户前往下载或可以直接打开，分别如下图所示：









你可以为你的网站增加这样一段代码达到效果：

1	<meta name="apple-itunes-app" content="app-id=你的应用的app id">

注意，当用户添加到主屏后，并且你的网站设置了

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

以便全屏显示，再点击主屏上的图标打开你的网站的话，这个app banner条是不会出现的。

0

原文：http://youyodf.sinaapp.com/archives/280

作者：admin | 分类目录：移动网页应用 | 标签： API、ios6、safari、webapp、电脑调试手机网站