—发移动应用到底是选择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的新功能：
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模拟的三个选项：
新的模拟器还包括取代谷歌地图的新地图应用程序和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”但不正确。 不过你想要的话，可以将它命名。 但大小属性被完全忽略。