博客

但是刷了iOS 6的所有iPhone的ua都是这个，那么判断是否是iPhone 5就要用js或者media query的方法了： 

主屏幕web app
 




如果你之前通过apple-mobile-web-app-capable这个meta标签来将网页添加到主屏幕的话，这种方法只支持iPhone 的3.5″屏幕，而iPhone 5会比较悲催。 

iPhone 5下的表现： 

即便你提供了一个大尺寸的启动界面(640*1096)，iPhone 5依然会将其压缩至640*920。 




解决方案：
 




你需要放弃之前使用的viewport属性width=device-width或者width=320。如果你不指定viewport，它也可以很正常的显示： 

或者你也可以指定一个非320的宽度： 

如果你不想影响iPhone 4s以前的safari，也可以用js动态设置viewport： 

对于启动画面，可以用media query来调整： 

主屏webapp默认标题：
 




可以通过meta标签来给主屏webapp指定标题： 

HTML5支持
 




file api
 




现在可以简单的支持文件上传了，同时也支持多文件上传： 

但是，由于iOS的资源管理机制的限制，你只能上传照片和视频，不能上传其它格式文件，也不支持getUserMedia api(camera api)。 




Audio api
 




这个不解释了。 




smart app banner
 




如果你的网站同时提供的有app在itunes app store，可以通过一个简单的meta标签来提示用户，让用户下载安装你的native app(或者是hybrid app)： 

也支持itunes affiliate program（推广联盟）： 

需要注意的是，app banner占位为156px的高度——高分屏为312px。 

CSS3 Filter
 




这个不解释了，不清楚的请阅读
《-webkit-filter是神马？》
。 




Safari 全屏
 




这个很赞，有些像 Mac OS X 的全屏方法，但是只支持横屏的场景。 

点击右下角的icon即可全屏： 

animation timing api
 




这个对游戏开发者非常有用，详情可访问
Animation Timing API
，也可以看下
Paul Irish的这个教程
。 




CSS image set
 




这个很赞，就是你可以为css 选择器指定多个特定的图片，用于区分高分屏和非高分屏： 

可以支持background-image之类的属性。 




这个是webkit私有属性，其它浏览器不支持。希望os x下也开始支持吧，这样就不用 background-size来区分视网膜屏了。 




CSS 3 cross-fade
 




iOS 6支持一些最新的CSS3 image values标准，包括cross-fade。这样我们可以在同一个选择器上使用多张图片，以实现半透明或者动画的效果： 

Web View更新：
 




需要注意的是，webview中的javascript速度，比nitro引擎的Safari慢3.3倍。 




嗯，上面说的hybrid模式就是用webview组件封装的webapp，phonegap之类的第三方开发工具既是这种模式。




同步调试
 




iOS 6中Safari和webview，支持用桌面Safari同步调试了。方法很简单： 

1. 手机上设置Safari开启 web inspector（设置–>safari–>高级）
2. 手机连上电脑
3. 打开电脑上的Safari，然后菜单–》开发，即可看到设备。点击即可调试。

然后你就可以看到safari 6的调试器： 

总结
 




这个版本的iOS中的safari提升还是很多的，特别是同步调试功能，终于可以像在pc上一样调试webapp或者hybrid app了，给开发者提供了很大的方便。