|
—发移动应用到底是选择Native、Web应用或者混合应用？答案是不同的移动应用需要不同的技术，选择合适的就行。其实大多数移动应用，不管是企业移动应用还是互联网移动应用，90%都可以使用基于HTML5的Web技术就足够。在Android 4.0和iOS 6以上浏览器已经是最快的应用了，比任何本地的微博、微信都快，无须更新升级，无须上传分裂的APP市场，无须突然被苹果下架应用。再看看最近发布 Firefox OS 开发手机的配置也大概知道，运行大多数应用不需要那么高配置。 目前主流的智能终端中，iOS6对HTML5的支持程度仍旧是最好的，领先于Android和Windows phone。随着iPhone5的性能再次翻倍，以及iOS不断提升的canvas渲染性能，加之Android的webGL，Win8/wp8的本地api对Javascript开放，性能已经不再是开发优秀移动应用的主要屏障，如今要考虑的是如何发挥HTML5的优势做出用户喜欢的应用。下面看看iPhone5和iOS6上HTML5开发的新增功能。 iPhone 5： iOS 6的新功能： - 文件上传、具有媒体捕捉摄像头的访问和文件API
- 网络音频API
- 本机应用程序集成的智能应用横幅
- CSS 3过滤器
- 交叉淡入淡出CSS 3
- CSS Partial图片支持
- 全屏支持
- 动画计时API
- 支持多分辨率的图像
- Passbook优惠券和月票交付
- 存储API和Web应用程序的变化
- 本机Web应用程序的Web View的改变
- 远程Web Inspector调试
- 更快的JavaScript引擎和其他新功能
iPhone 5 新的iPhone 5，以及自从iPod Touch第5代开始，在Web开发方面有一个大的变化：屏幕分辨率。 这些设备具有宽4寸屏幕，WDVGA（广角双 VGA）640×1136像素，326 DPI的Retina Display。 这些设备和iPhone 4/4S一样具有相同的宽度但高176像素。 新模拟器 包含iPhone 5仿真器的Xcode4 iOS 模拟器 新的Xcode 4（Mac AppStore）包括更新后的iPhone模拟器。 新版本的iPhone模拟的三个选项： - iPhone：iPhone 3GS，iPod Touch的第一，第三代
- iPhone Retina 3.5“：iPhone 4，iPhone 4s，iPod Touch的第四代
- iPhone Retina 4“：iPhone5，iPod Touch的第5代
新的模拟器还包括取代谷歌地图的新地图应用程序和Passbook。 你需要为新设备做的 通常情况下，如果你的网站/应用程序进行了优化，可垂直滚动，不应该有任何问题。 同一个视口(Viewport)中，图标和iPhone 4/4S技术应能正常工作。 但当更新了iOS，同时也更新了Web View：这意味着所有的本机Web应用程序，如PhoneGap/Apache Cordov应用程序和伪浏览器，如iOS上谷歌浏览器也更新了。 但是， 如果您的解决方案是高度相关的，那么可能有一个问题，看看下面的例子，iPhone 4和iPhone 5的谷歌地图网站。 由于这是说作为一个恒定的高度，不隐藏状态栏，并在底部有一栏空白。 如果你设计了一个特定高度的谷歌地图。 正如你可以看到的（右图来自iPhone 5）有一个白色的底栏和URL地址栏无法隐藏，因为没有足够的内容。 如果您使用的是响应性的Web设计，你不应该有太多的麻烦，通常情况下，RWD技术使用的是宽度而不是高度作为条件。 设备检测 在写这篇文章的时候，还没有iPhone 5在市面上。 没有办法在服务器端检测iPhone 5 。 用户代理只有iOS 6系统的iPhone，以及使用完全相同的用户代理的iOS6系统的iPhone 4S和iPhone 5。 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 因此， 客户端检测4寸iPhone设备唯一的方法来是使用JavaScript或媒体查询。请记住，这些器件具有1136像素的高度，但我们所谈论的CSS像素（独立分辨率像素）约568像素高度，为这些设备像素的一半。 isPhone4inches = (window.screen.max-height==568); 使用CSS媒体查询和响应性Web设计技术，我们可以检测到iPhone 5使用： @media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) { /* iPhone 5 or iPod Touch 5th generation */ } 主屏幕的webapps 主屏幕的webapps问题似乎是很严重的。 我已经报告了这个问题，在NDA还没有来自苹果的任何答案。 当你添加一个网站的首页到屏幕，支持apple-mobile-web-app-capable元标签的web应用只工作在iPhone 3.5“仿真模式（它不考虑整个高度）。 在图像里能看到黑栏条。 这是iPhone 5和新iPod Touch默认情况下全屏幕webapp。 如果操作系统是不确定是否支持更宽的屏幕，不给web应用扩展高度是一个好主意。 如果你提供一个apple-touch-startup-image为640×1096，iPhone 5将它调整大小为640×920放在主屏幕。 解决方案是， 你需要忘记viewport的width=device-width or width=320。 如果不提供viewport，webapps将正常工作。 同样的，如果你使用其他属性而不是宽度也类似，如果你不希望viewport默认980px，可以这样： <meta name="viewport" content="initial-scale=1.0"> 甚至如果指定一个不同于320宽可以这样： <meta name="viewport" content="width=320.1"> 不动viewport，下面的脚本也可以达到目的： if (window.screen.max-height==568) { // iPhone 4" document.querySelector("meta[name=viewport]").content="width=320.1"; } 如果程序启动图像为640×1096，并在不同的设备上使用不同的图像，你可以使用媒体查询。 一些报道说，你需要将启动图片象本机程序一样命名为“Default-568h@2x.png”但不正确。 不过你想要的话，可以将它命名。 但大小属性被完全忽略。
|
