ios6为前端webapp开发者带来了什么，第一时间同步体验更新
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条是不会出现的。