IOS制作之iPhone 5/iOS 6前端开辟指南仓酷云

除了在程序加载的时候把我的view加载到他上目前我还没用到过其他的苹果一直很推崇MVC的程序结构视图模型控制器简单说就是视图负责显示内容模型负责所有数据的保存结构或者一些其他数据操作控制器是用来协调视图和模型举车的发动机系统的例子iPhone5和iOS6已公布好几天了，信任良多童鞋都已刷上了iOS6。我们在之前就宣布过《iOS6中Safari对HTML5的撑持》，可是除此以外，实践上市的iOS6详细撑持另有哪些新功效？让我们一同看下。
iPhone起首屏幕变长了，分辩率从iPhone4s的640px*960酿成了640*1136，长宽比酿成了16：9。DPI仍然是326。别的体现看起来是一样的。
检测iPhone5/iOS6

检测iOS6很复杂，用ua就能够了：

1. 1

复制代码

1. Mozilla/5.0(iPhone;CPUiPhoneOS6_0likeMacOSX)AppleWebKit/536.26(KHTML,likeGecko)Version/6.0Mobile/10A403Safari/8536.25

复制代码

可是刷了iOS6的一切iPhone的ua都是这个，那末判别是不是是iPhone5就要用js大概mediaquery的办法了：
js：

1. 1

复制代码

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

复制代码

CSS：

1. 123

复制代码

1. @media(device-height:568px)and(-webkit-min-device-pixel-ratio:2){/*iPhone5oriPodTouch5thgeneration*/}

复制代码

主屏幕webapp

假如你之前经由过程apple-mobile-web-app-capable这个meta标签来将网页增加到主屏幕的话，这类办法只撑持iPhone的3.5″屏幕，而iPhone5会对照悲催。
meta标签：

1. 1

复制代码

1. <metaname="apple-mobile-web-app-capable"content="yes">

复制代码

iPhone5下的体现：

登录/注册后可看大图

<br>
即使你供应了一个年夜尺寸的启动界面(640*1096)，iPhone5仍然会将其紧缩至640*920。
办理计划：

你必要保持之前利用的viewport属性width=device-width大概width=320。假如你不指定viewport，它也能够很一般的显现：

1. 1

复制代码

1. <metaname="viewport"content="initial-scale=1.0">

复制代码

大概你也能够指定一个非320的宽度：

1. 1

复制代码

1. Mozilla/5.0(iPhone;CPUiPhoneOS6_0likeMacOSX)AppleWebKit/536.26(KHTML,likeGecko)Version/6.0Mobile/10A403Safari/8536.251

复制代码

假如你不想影响iPhone4s之前的safari，也能够用js静态设置viewport：

1. 123

复制代码

1. Mozilla/5.0(iPhone;CPUiPhoneOS6_0likeMacOSX)AppleWebKit/536.26(KHTML,likeGecko)Version/6.0Mobile/10A403Safari/8536.253

复制代码

关于启动画面，能够用mediaquery来调剂：

1. Mozilla/5.0(iPhone;CPUiPhoneOS6_0likeMacOSX)AppleWebKit/536.26(KHTML,likeGecko)Version/6.0Mobile/10A403Safari/8536.254

复制代码

1. Mozilla/5.0(iPhone;CPUiPhoneOS6_0likeMacOSX)AppleWebKit/536.26(KHTML,likeGecko)Version/6.0Mobile/10A403Safari/8536.255

复制代码

主屏webapp默许题目：

能够经由过程meta标签来给主屏webapp指定题目：

1. 1

复制代码

1. Mozilla/5.0(iPhone;CPUiPhoneOS6_0likeMacOSX)AppleWebKit/536.26(KHTML,likeGecko)Version/6.0Mobile/10A403Safari/8536.257

复制代码

HTML5撑持：

fileapi：

如今能够复杂的撑持文件上传了，同时也撑持多文件上传：

1. Mozilla/5.0(iPhone;CPUiPhoneOS6_0likeMacOSX)AppleWebKit/536.26(KHTML,likeGecko)Version/6.0Mobile/10A403Safari/8536.254

复制代码

1. Mozilla/5.0(iPhone;CPUiPhoneOS6_0likeMacOSX)AppleWebKit/536.26(KHTML,likeGecko)Version/6.0Mobile/10A403Safari/8536.259

复制代码

可是，因为iOS的资本办理机制的限定，你只能上传照片和视频，不克不及上传别的格局文件，也不撑持getUserMediaapi(cameraapi)。
Audioapi

这个不注释了。
smartappbanner

假如你的网站同时供应的有app在itunesappstore，能够经由过程一个复杂的meta标签来提醒用户，让用户下载安装你的nativeapp(大概是hybridapp)：

1. 1

复制代码

1. 11

复制代码

也撑持itunesaffiliateprogram（推行同盟）：

1. Mozilla/5.0(iPhone;CPUiPhoneOS6_0likeMacOSX)AppleWebKit/536.26(KHTML,likeGecko)Version/6.0Mobile/10A403Safari/8536.254

复制代码

1. 13

复制代码

必要注重的是，appbanner占位为156px的高度——高分屏为312px。

登录/注册后可看大图

<br>
CSS3Filter

这个不注释了，不分明的请浏览《-webkit-filter是神马？》。
Safari全屏

这个很赞，有些像macosx的全屏办法，可是只撑持横屏的场景。

登录/注册后可看大图

<br>
点击右下角的icon便可全屏：

登录/注册后可看大图

<br>
animationtimingapi

这个对游戏开辟者十分有效，概况可会见AnimationTimingAPI，也能够看下PaulIrish的这个教程。
CSSimageset

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

1. 1

复制代码

1. 15

复制代码

能够撑持background-image之类的属性。
这个是webkit公有属性，别的扫瞄器不撑持。但愿osx下也入手下手撑持吧，如许就不必background-size来辨别视网膜屏了。
CSS3cross-fade

iOS6撑持一些最新的CSS3imagevalues尺度，包含cross-fade。如许我们能够在统一个选择器上利用多张图片，以完成半通明大概动画的效果：

1. 1

复制代码

1. 17

复制代码

WebView更新：

必要注重的是，webview中的javascript速率，比nitro引擎的Safari慢3.3倍。
嗯，下面说的hybrid形式就是用webview组件封装的webapp，phonegap之类的第三方开辟工具既是这类形式。
同步伐试：

iOS6中Safari和webview，撑持用桌面Safari同步伐试了。
办法很复杂：

• 手机上设置Safari开启webinspector（设置&ndash;>safari&ndash;>初级）
  
• 手机连上电脑
  
• 翻开电脑上的Safari，然后菜单&ndash;》开辟，便可看到设备。点击便可调试。
  

登录/注册后可看大图

<br>

登录/注册后可看大图

<br>
然后你就能够看到safari6的调试器：

登录/注册后可看大图

<br>
总结

这个版本的iOS中的safari提拔仍是良多的，出格是同步伐试功效，终究能够像在pc上一样调试webapp大概hybridapp了，给我们开辟者供应了很年夜的便利。
PS：头几天在做某项目标wap版——固然和iOS没太年夜干系——然后各个手机自带的wap1.0和wap2.0扫瞄器都一般了，没年夜成绩了，了局发明国产的两年夜巨子QQ手机扫瞄器和UC扫瞄器却在android的某个型号下有各类小成绩，关头是，它们调试起来相称贫苦。因而我们就yy，这些第三方手机扫瞄器一样平常都是双核的，webkit内核下是没成绩的，有成绩的是“自立研发”的内核，那末，这些扫瞄器厂商是不是能够像safari如许，供应一个meta属性，闪开发者来指定用哪一个内核来衬着？

打开.xib的文件打开的就是IBIB和代码交互用的是IBActionIBOutlet这些标记这些标记追踪到他们的定义其实对编译器来说什么都不表示