iPhone 5/iOS 6 前端开发指南-CSDN博客

iPhone 5和iOS 6已经发布好几天了，相信很多童鞋都已经刷上了iOS 6。实际上iOS 6支持还有哪些新功能？让我们一起看下。

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

检测iPhone 5/iOS 6

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

    代码  
  
 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的方法了：

    Javascript代码  
  
 isPhone4inches = (window.screen.height==568);  

    Css代码  
  
 @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会比较悲催。

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

iPhone 5下的表现：

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

解决方案：

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

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

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

    Html代码  
  
 <meta name="viewport" content="width=320.1">  

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

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

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

    Html代码  
  
 <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指定标题：

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

HTML5支持

file api

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

    Html代码  
  
 <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)：

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

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

    Html代码  
  
 <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 选择器指定多个特定的图片，用于区分高分屏和非高分屏：

    Css代码  
  
 -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。这样我们可以在同一个选择器上使用多张图片，以实现半透明或者动画的效果：

    Css代码  
  
 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同步调试了。方法很简单：