iPhone 5/iOS 6前端开发指南

标签: Front News Resource ios iphone Safari | 发表时间:2012-09-28 01:02 | 作者:神飞
出处:http://www.qianduan.net

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

相关 [iphone ios 前端] 推荐:

[教學] 用 Windows Jailbreak iPhone 4S / iPad2 iOS 5.0.1

- - UNWIRE.HK 流動科技生活
iPhone Dev Team 剛剛推出了一個 Redsn0w CLI  0.4.3 工具更新,讓 Windows 用家也可完美 Jailbreak (untethered),以下是簡單的步驟教學. 先把密碼鎖關閉,免除 JB 過程中不必要的麻煩. 下載 RedSn0w CLI 0.4.3 並解壓到 C Drive 下的  cinject_0.4.3 資料夾.

iPhone 4s/5在iOS 9.1和iOS 9下表现如何?

- - 威锋网-首页- 最新RSS订阅
  威锋网 9 月 20 日消息 苹果已经先后公布了 iOS 9.1 公测版和 iOS 9 正式版系统,一些较新的设备自然是能体验到新系统带来的各种福利了,那么老款 iPhone 搭配最新系统会有怎样的表现呢.   近日外媒 EverythingApplePro 将两款 iPhone 4s 和两款 iPhone 5 摆在一起做了一次直观的比较,相同的手机中左边运行着 iOS 9 正式版、右边运行着 iOS 9.1 公测版 Beta1,它们都只安装了两款应用,并均为插 SIM 卡.

iPhone Settings Shortcuts – iOS 上必不可少的可视化 Widgets | 小众软件 > iOS

- Stephanie - 小众软件
当我每次拿着 iPhone 进入 Starbucks,拿着咖啡的同时要单手调个音量,或是要在设置的一堆鸟语中(为了平时装B,我把语言全设成了西班牙语)切换 3G 和 WIFI ,我就想喊救命. 没错,Settings 就是整只 iPhone 里我最讨厌的 App. 幸好有 Jeff Broderick 开发的 iPhone Settings Shortcuts (beta),让设置中的常见功能通通变成可视化快捷方式.

iPhone 5/iOS 6前端开发指南

- - 前端观察
iPhone 5和iOS 6已经发布好几天了,相信很多童鞋都已经刷上了iOS 6. 我们在之前就发表过《 iOS 6中Safari对HTML5的支持》,但是除此之外,实际上市的iOS 6具体支持还有哪些新功能. iPhone首先屏幕变长了,分辨率从iPhone 4s的640px*960变成了640*1136,长宽比变成了16:9.

iOS 5为你的iPhone 4相机带来的11个改进

- Linc - 36氪
如果你不打算升级你的iPhone 4到4S,也不必羡慕它所带来的相机改进,因为iOS 5为你的iPhone 4相机也带来了很大的改进,下面我们一起来看看. 双击Home键可以在解锁键旁边看到相册按钮,点击会直接打开相机. 现在你可以通过音量上键来拍照,这比在屏幕上点击一个固定位置要容易的多. 使用苹果官方的耳机,音量上键和手机上的音量上键效果是一样的,它可以让你“远程”控制快门.

XCode 4.0 iOS SDK 4.3 iPhone证书破解 完全教程

- Pei - 博客园-首页原创精华区
参考资料: http://www.alexwhittemore.com/?p=398&cpage=7#comments. 一、创建 self-signed cert(自签名证书). 启动钥匙串,选择 钥匙串访问=》证书助理=》创建. 创建以 iPhone Developer 为名字的证书. 证书类型好像不重要,我就是随便选的;名字好像也不重要,“iPhone Developer"好像纯粹是为了和 XCode的默认值一致,你也可以使用自己的名字.

更簡單的 Windows Jailbreak iPhone 4S / iPad2 iOS 5.0.1 方法 – Absinthe

- - UNWIRE.HK 流動科技生活
昨晚 redsn0w CLI 推出了更新,令 Windows 用家也可以 jailbreak iPhone 4S / iPad2 ,不過有些讀者不太熟悉 command console 的操作,如果想用回圖型介面的話,有好消息了. Absinthe 剛剛推出了 Windows 及 linux 版,各位可以依照以下連接下載及進行 Jailbreak.

WinZip 官方推出 iOS 版本,完美支持 iPhone 和 iPad

- - 果迷网
如果你是一名80后,你说你没用过 WinZip 这款解压软件我都不相信…在 WinRAR 流行之前,WinZip 几乎是每一部电脑的必装软件. 虽然现在这款软件已经很少有人使用,但它仍然是我们这一代人中曾经最熟悉的软件之一. 在文件压缩领域,WinZip 公司已经为人们服务了超过20年. 各位肯定想不到,WinZip 竟然在最近推出了 iOS 版本,并且原生支持 iPhone 和 iPad.

苹果发布 iOS 6.1.1,修复 iPhone 4S 网络连接问题

- - 果迷网
针对近来果迷们反馈升级到 iOS 6.1 固件后遇上的各种 bug,苹果已经发布 iOS 6.1.1 固件进行修复性更新,而此次更新仅针对一款设备——iPhone 4S. 苹果公司称,iOS 6.1.1 固件解决了此前备受关注的 iPhone 4S 蜂窝移动数据网络的性能问题. 而此前重点优化日本地区地图应用的 iOS 6.1.1 首个测试版(beta 1)的更新内容并没有出现在此次的 iOS 6.1.1 中,苹果公司称将会在发布正式版更新时使用新的版本号,同时修复此次发布的 iOS 6.1.1 中发现的问题.

iOS 7.1升级7大改进:iPhone 4更流畅了

- - 雷锋网
苹果刚刚发布了iOS 7.1,除了修复一些安全漏洞和一些bug外,还内藏了一些新特性. 1、CarPlay正式登场. 苹果的CarPlay已经被我们谈论许多了,而iOS 7.1更新则宣布了它的正式到来. 通过CarPlay,苹果把自家的地图、音乐、信息服务以及一些第三方App带到了汽车上,并通过Siri来进行交互.