iPhone 5和iOS 6已经发布好几天了，相信很多童鞋都已经刷上了iOS 6。我们在之前就发表过《iOS 6中Safari对HTML5的支持》，但是除此之外，实际上市的iOS 6具体支持还有哪些新功能？让我们一起看下。

iPhone首先屏幕变长了，分辨率从iPhone 4s的640px*960变成了640*1136，长宽比变成了16：9。DPI依然是326。其它表现看起来是一样的。

检测iPhone 5/iOS 6

检测iOS 6很简单，用ua就可以了：

1

Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A403 Safari/8536.25

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

js：

1

isPhone4inches = (window.screen.height==568);

CSS：

1
2
3

@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) {
/* iPhone 5 or iPod Touch 5th generation */
}

主屏幕web app

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

meta标签：

1

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

iPhone 5下的表现：

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

解决方案：

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

1

<meta name="viewport" content="initial-scale=1.0">

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

1

<meta name="viewport" content="width=320.1">

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

1
2
3

if (window.screen.height==568) { // iPhone 4"
document.querySelector("meta[name=viewport]").content="width=320.1";
}

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

1
2

<link href="startup-568h.png" rel="apple-touch-startup-image" media="(device-height: 568px)">
<link href="startup.png" rel="apple-touch-startup-image" sizes="640x920" media="(device-height: 480px)">

主屏webapp默认标题：

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

1

<meta name="apple-mobile-web-app-title" content="前端观察">

HTML5支持：

file api：

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

1
2

<input type="file"><!--单文件-->
<input type="file" multiple> <!--多文件-->

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

Audio api

这个不解释了。

smart app banner

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

1

<meta name="apple-itunes-app" content="app-id=9999999">

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

1
2

<meta name="apple-itunes-app" content="app-id=9999999, app-argument=xxxxxx">
<meta name="apple-itunes-app" content="app-id=9999999, app-argument=xxxxxx, affiliate-data=partnerId=99&siteID=XXXX">

需要注意的是，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 选择器指定多个特定的图片，用于区分高分屏和非高分屏：

1

-webkit-image-set(url(low.png) 1x, url(hi.jpg) 2x)

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

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

CSS 3 cross-fade

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

1

background-image: -webkit-cross-fade(url("logo1.png"), url("logo2.png"), 50%);

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了，给我们开发者提供了很大的方便。

PS：前几天在做某项目的wap版——虽然和iOS没太大关系——然后各个手机自带的wap 1.0和wap 2.0浏览器都正常了，没大问题了，结果发现国产的两大巨头QQ手机浏览器和UC浏览器却在android的某个型号下有各种小问题，关键是，它们调试起来相当麻烦。于是我们就yy，这些第三方手机浏览器一般都是双核的，webkit内核下是没问题的，有问题的是“自主研发”的内核，那么，这些浏览器厂商是否可以像safari这样，提供一个meta属性，让开发者来指定用哪个内核来渲染？

整理自：iPhone 5 and iOS 6 for HTML5 developers

建议继续学习：

1. IOS安全–浅谈关于IOS加固的几种方法    (阅读：14387)
2. 手机产品设计方向    (阅读：6340)
3. iPhone下的libcurl with SSL for iOS    (阅读：5005)
4. iOS内存暴增问题追查与使用陷阱    (阅读：4192)
5. 10个必需的iOS开发工具和资源    (阅读：3841)
6. iOS push服务    (阅读：3554)
7. 在Visual Studio中使用MonoTouch开发iOS应用程序（上）：环境配置    (阅读：3537)
8. 介绍几款iPhone手机原型设计的工具    (阅读：3180)
9. IPhone上的邮件推送    (阅读：3206)
10. Android与iPhone应用程序界面设计的差异性    (阅读：3138)