開發(fā)移動(dòng)應(yīng)用到底是選擇Native、Web應(yīng)用或者混合應(yīng)用？答案是不同的移動(dòng)應(yīng)用需要不同的技術(shù)，選擇合適的就行。其實(shí)大多數(shù)移動(dòng)應(yīng)用，不管是企業(yè)移動(dòng)應(yīng)用還是互聯(lián)網(wǎng)移動(dòng)應(yīng)用，90%都可以使用基于HTML5的Web技術(shù)就足夠。在Android 4.0和iOS 6以上瀏覽器已經(jīng)是最快的應(yīng)用了，比任何本地的微博、微信都快，無須更新升級(jí)，無須上傳分裂的APP市場，無須突然被蘋果下架應(yīng)用。再看看最近發(fā)布 Firefox OS 開發(fā)手機(jī)的配置也大概知道，運(yùn)行大多數(shù)應(yīng)用不需要那么高配置。

　　目前主流的智能終端中，iOS6對(duì)HTML5的支持程度仍舊是最好的，領(lǐng)先于Android和Windows phone。隨著iPhone5的性能再次翻倍，以及iOS不斷提升的canvas渲染性能，加之Android的webGL，Win8/wp8的本地api對(duì)Javascript開放，性能已經(jīng)不再是開發(fā)優(yōu)秀移動(dòng)應(yīng)用的主要屏障，如今要考慮的是如何發(fā)揮HTML5的優(yōu)勢做出用戶喜歡的應(yīng)用。下面看看iPhone5和iOS6上HTML5開發(fā)的新增功能。

　　iPhone 5：

　　iOS 6的新功能：

　　iPhone 5

　　新的iPhone 5，以及自從iPod Touch第5代開始，在Web開發(fā)方面有一個(gè)大的變化：屏幕分辨率。 這些設(shè)備具有寬4寸屏幕，WDVGA（廣角雙 VGA）640×1136像素，326 DPI的Retina Display。 這些設(shè)備和iPhone 4/4S一樣具有相同的寬度但高176像素。

　　新模擬器 

　　  包含iPhone 5仿真器的Xcode4 iOS 模擬器

　　新的Xcode 4（Mac AppStore ）包括更新后的iPhone模擬器。 新版本的iPhone模擬的三個(gè)選項(xiàng)： 

　　新的模擬器還包括取代谷歌地圖的新地圖應(yīng)用程序和Passbook。

　　你需要為新設(shè)備做的

　　通常情況下，如果你的網(wǎng)站/應(yīng)用程序進(jìn)行了優(yōu)化，可垂直滾動(dòng)，不應(yīng)該有任何問題。 同一個(gè)視口(Viewport)中，圖標(biāo)和iPhone 4/4S技術(shù)應(yīng)能正常工作。 但當(dāng)更新了iOS，同時(shí)也更新了Web View：這意味著所有的本機(jī)Web應(yīng)用程序，如PhoneGap/Apache Cordov應(yīng)用程序和偽瀏覽器，如iOS上谷歌瀏覽器也更新了。 但是， 如果您的解決方案是高度相關(guān)的，那么可能有一個(gè)問題，看看下面的例子，iPhone 4和iPhone 5的谷歌地圖網(wǎng)站。 由于這是說作為一個(gè)恒定的高度，不隱藏狀態(tài)欄，并在底部有一欄空白。 

　　 如果你設(shè)計(jì)了一個(gè)特定高度的谷歌地圖。 正如你可以看到的（右圖來自iPhone 5）有一個(gè)白色的底欄和URL地址欄無法隱藏，因?yàn)闆]有足夠的內(nèi)容。

　　如果您使用的是響應(yīng)性的Web設(shè)計(jì)，你不應(yīng)該有太多的麻煩，通常情況下，RWD技術(shù)使用的是寬度而不是高度作為條件。

　　設(shè)備檢測

　　在寫這篇文章的時(shí)候，還沒有iPhone 5在市面上。 沒有辦法在服務(wù)器端檢測iPhone 5 。 用戶代理只有iOS 6系統(tǒng)的iPhone，以及使用完全相同的用戶代理的iOS6系統(tǒng)的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設(shè)備唯一的方法來是使用JavaScript或媒體查詢。請(qǐng)記住，這些器件具有1136像素的高度，但我們所談?wù)摰腃SS像素（獨(dú)立分辨率像素）約568像素高度，為這些設(shè)備像素的一半。

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

　　使用CSS媒體查詢和響應(yīng)性Web設(shè)計(jì)技術(shù)，我們可以檢測到iPhone 5使用：

　　@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) {

　　/* iPhone 5 or iPod Touch 5th generation */

　　}

　　主屏幕的webapps

　　主屏幕的webapps問題似乎是很嚴(yán)重的。 我已經(jīng)報(bào)告了這個(gè)問題，在NDA還沒有來自蘋果的任何答案。

　　 當(dāng)你添加一個(gè)網(wǎng)站的首頁到屏幕，支持apple-mobile-web-app-capable元標(biāo)簽的web應(yīng)用只工作在iPhone 3.5“仿真模式（它不考慮整個(gè)高度）。 

　　 在圖像里能看到黑欄條。 這是iPhone 5和新iPod Touch默認(rèn)情況下全屏幕webapp。

　　如果操作系統(tǒng)是不確定是否支持更寬的屏幕，不給web應(yīng)用擴(kuò)展高度是一個(gè)好主意。 如果你提供一個(gè)apple-touch-startup-image為640×1096，iPhone 5將它調(diào)整大小為640×920放在主屏幕。

　　解決方案是， 你需要忘記viewport的width=device-width or width=320。 如果不提供viewport，webapps將正常工作。 同樣的，如果你使用其他屬性而不是寬度也類似，如果你不希望viewport默認(rèn)980px，可以這樣：

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

　　甚至如果指定一個(gè)不同于320寬可以這樣：

　　<meta name="viewport" content="width=320.1">

　　不動(dòng)viewport，下面的腳本也可以達(dá)到目的：

　　if (window.screen.height==568) { // iPhone 4"

　　document.querySelector("meta[name=viewport]").content="width=320.1";

　　}

　　如果程序啟動(dòng)圖像為640×1096，并在不同的設(shè)備上使用不同的圖像，你可以使用媒體查詢。 一些報(bào)道說，你需要將啟動(dòng)圖片象本機(jī)程序一樣命名為“[email protected]”但不正確。 不過你想要的話，可以將它命名。 但大小屬性被完全忽略。

　　您可以使用媒體查詢，提供不同的啟動(dòng)圖片：

　　<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)">

　　如果你想為低分辨率設(shè)備提供了另一種版本，那么你可以使用WebKit的設(shè)備像素比的條件了。 如果你想知道為什么是568px而不是1136px，記住我們使用的CSS像素和這些設(shè)備的像素比為2。

　　另一個(gè)問題是，購買了新設(shè)備后， iTunes將是否再次從備份安裝快捷方式圖標(biāo)，這是不明確的

　　iOS 6和HTML5的開發(fā)

　　iOS 6是為每一個(gè)iOS 5設(shè)備免費(fèi)提供更新的，除了iPad第一代，所以我們會(huì)看到這個(gè)版本瀏覽網(wǎng)頁真的很快，iPad的市場被第一次分割。 下面的調(diào)查結(jié)果是可用于所有iOS升級(jí)iOS設(shè)備。

　　文件管理問題

　　iOS 6 上的 Safari 瀏覽器支持的文件上傳并且有HTML Media Capture的部分支持。 一個(gè)簡單的文件上傳，會(huì)要求用戶從相機(jī)或相冊里輸入一個(gè)文件，你可以在圖中看到。 我真的很喜歡Safari顯示圖片預(yù)覽，而不是一個(gè)臨時(shí)文件名。

　　<label>Single file</label>

　　<input type="file">

　　我們也可以使用HTML5新的布爾屬性請(qǐng)求multiple文件。 在這種情況下，用戶可以不使用相機(jī)作為源。

　　<label>Multiple files</label>

　　<input type="file" multiple>

　　 我們可以使用文件上傳訪問攝像頭和相冊

　　雖然沒有辦法強(qiáng)制使用攝像頭， 但我們可以使用accept屬性只指定想捕捉的圖像或視頻。

　　<input type=file accept="video/*">

　　<input type=file accept="image/*">

　　不支持其他類型的文件 ，如音頻，Pages文檔或PDF文件。 也沒有g(shù)etUserMedia攝像頭的實(shí)時(shí)流媒體支持。

　　有圖片和視頻選擇后你能做什么呢？

　　網(wǎng)絡(luò)音頻API

　　HTML5游戲開發(fā)商應(yīng)該是喜歡！ 網(wǎng)絡(luò)音頻API在移動(dòng)瀏覽器第一次出現(xiàn)。 這個(gè)JavaScript API允許我們處理和合成音頻。 如果你從來沒有玩過一些低級(jí)別的音頻，API可能看起來有點(diǎn)怪異，但一段時(shí)間以后就不難理解了。 同樣，HTML5ROCKS有一個(gè)好文章使用音頻API上手。

　　API更多的信息和消息在 http://www.html5audio.org

　　智能應(yīng)用程序橫幅

　　網(wǎng)站還是本機(jī)應(yīng)用程序？ 如果我們都有，現(xiàn)在我們可以將我們的網(wǎng)站與我們的本機(jī)應(yīng)用程序連接 。 有了智能應(yīng)用程序橫幅，當(dāng)網(wǎng)站上有一個(gè)相關(guān)聯(lián)的本機(jī)應(yīng)用程序時(shí)，Safari瀏覽器可以顯示一個(gè)橫幅。 如果用戶沒有安裝這個(gè)應(yīng)用程序?qū)@示“安裝”按鈕，或已經(jīng)安裝的顯示“查看”按鈕可打開它。 我們也可以從網(wǎng)絡(luò)發(fā)送參數(shù)給本機(jī)應(yīng)用程序。 例如打開與用戶在網(wǎng)站上看到內(nèi)容相同的本機(jī)應(yīng)用程序位置。

　　要定義一個(gè)智能應(yīng)用程序橫幅，我們需要?jiǎng)?chuàng)建一個(gè)meta標(biāo)簽， 名稱=“apple-itunes-app”。 首先，我們需要去iTunes Link Maker搜索我們的應(yīng)用程序和應(yīng)用程序ID。

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

　　我們可以使用 app-argument 提供字符串值，如果我們參加的iTunes聯(lián)盟計(jì)劃，我們還可以添加子公司相同的元標(biāo)記數(shù)據(jù) 

　　<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">

　　橫幅需要156像素（設(shè)備是312 hi-dpi）在頂部，直到用戶在下方點(diǎn)擊內(nèi)容或關(guān)閉按鈕，您的網(wǎng)站上才為你的網(wǎng)站展現(xiàn)全部的高度。 它就像HTML的DOM對(duì)象，但它不是一個(gè)真正的DOM。 

　　有了智能應(yīng)用程序橫幅，瀏覽器會(huì)自動(dòng)邀請(qǐng)用戶安裝或打開本機(jī)應(yīng)用程序

　　幾秒鐘內(nèi)，橫幅顯示“加載”動(dòng)畫時(shí)系統(tǒng)驗(yàn)證應(yīng)用程序?qū)Ξ?dāng)前用戶的設(shè)備和App Store是有效的。 如果它是無效的，旗幟自動(dòng)隱藏，例如，它是一個(gè)iPad的唯一的應(yīng)用程序，你正在瀏覽iPhone或應(yīng)用程序僅適用于德國的App Store，而您的帳戶是在美國。

　　CSS 3過濾器

　　CSS 3 過濾器是一組圖像操作，我們可以使用CSS的功能，如灰度，模糊，下拉陰影，亮度等功效。 這些功能將在屏幕上顯示內(nèi)容前被應(yīng)用。 我們可以用spaces使用多個(gè)過濾器。

　　這里你可以嘗試一個(gè)很好的演示。 一個(gè)簡單的例子，例如：

　　-webkit-filter: blur(5px) grayscale (.5) opacity(0.66) hue-rotate(100deg);

　　CSS 3交叉淡變

　　iOS 6開始支持一些新的CSS Image Values，包括交叉淡入淡出功能。 有了這個(gè)功能，我們可以將兩個(gè)圖像在同一個(gè)地方有不同程度的透明度，它甚至可以是過渡或動(dòng)畫的部分。

　　簡單的例子：

　　background-image: -webkit-cross-fade(url("logo1.png"), url("logo2.png"), 50%);

　　Safari中的全屏幕

　　除了chrome-less 主屏幕meta標(biāo)簽，現(xiàn)在的iPhone和iPod Touch（而不是在iPad）支持全屏幕模式的窗口。 這是完美的身臨其境的體驗(yàn)，如游戲或多媒體應(yīng)用程序。 沒有辦法強(qiáng)制全屏模式，它需要由用戶啟動(dòng)（工具欄上的最后一個(gè)圖標(biāo)）。 但是，我們可以邀請(qǐng)用戶，移動(dòng)到窗口，并按下屏幕上的全屏圖標(biāo)來激活我們的應(yīng)用程序。 如果我們混合了一些觸摸事件處理，我們就可以隱藏URL地址欄來提供良好界面，直到用戶離開全屏幕。

　　 iPhone和iPod Touch上的全螢?zāi)粚?dǎo)航

　　你總能找到兩個(gè)或三個(gè)覆蓋底部的按鈕，你應(yīng)該知道，哪個(gè)后退按鈕，可選的前進(jìn)按鈕和取消全屏。

　　您可以使用onresize事件檢測是否用戶切換到全屏幕。

　　動(dòng)畫計(jì)時(shí)API

　　游戲開發(fā)人員很幸運(yùn)。 iOS 6支持的動(dòng)畫計(jì)時(shí)API ，也被稱為requestAnimationFrame，一個(gè)新的方法來管理基于JavaScript的動(dòng)畫。 這里有一個(gè)很好的示范，更詳細(xì)的說明看來自保羅愛爾蘭博客 。

　　CSS圖片Set，這是沒有任何標(biāo)準(zhǔn)組的一部分。 這是一個(gè)新的圖像功能， 圖像集接收一組附加的條件或圖片。有了這個(gè)新的功能，我們不需要為不同的分辨率，使用媒體查詢來定義不同的圖像。 工作的語法是：

　　-webkit-image-set(url(low.png) 1x, url(hi.jpg) 2x)

　　它就像CSS背景圖像一樣工作 。  有了這個(gè)新的語法，我們可以有更清晰的多分辨率圖像清晰度，因此我們并不需要使用媒體查詢和background-size 值。

　　Passbook 

　　Passbook是一個(gè)新的iOS應(yīng)用程序，一個(gè)虛擬容器，例如通行證，門票，優(yōu)惠券，會(huì)員卡，禮品卡。 作為一名Web開發(fā)人員，你可能想為用戶提供優(yōu)惠券，門票，你的下一個(gè)航班的電子客票或忠誠卡。

　　蘋果允許網(wǎng)站不需要本機(jī)程序就可提供這種通行證 。

　　為了在您的網(wǎng)站上提供通行證，你需要使用application/vnd.apple.pkpass MIME類型或通過電子郵件發(fā)送

　　蘋果提供了一個(gè)工具，您可以在您的服務(wù)器上快速地安裝打包和定制簽名通行證可能包括當(dāng)前用戶的信息

　　要傳遞的文件僅僅是一個(gè)JSON元數(shù)據(jù)文件和一對(duì)圖像。 我們需要打包文件，并簽署。 不幸的是 ， 要簽署通過，我們需要蘋果的簽名 ，這意味著Web開發(fā)人員需要一個(gè)iPhone開發(fā)者計(jì)劃帳戶（$ 99/year）。 如果您收到通知已經(jīng)簽署，您可以將它在自己的網(wǎng)站上。

　　通行證的強(qiáng)大功能之一是，一旦安裝結(jié)束，并通過推送通知服務(wù)，可以提供一些網(wǎng)絡(luò)服務(wù)給用戶和推送消息提醒，操作系統(tǒng)將調(diào)用你的Web服務(wù)，更新信息的傳遞。

　　更多passbook信息developer.apple.com

　　存儲(chǔ)API和web應(yīng)用程序的更新

　　沒有新的存儲(chǔ)API。 沒有索引型數(shù)據(jù)庫的支持。 然而，也有一些變化，你應(yīng)該考慮：

　　<meta name="apple-mobile-web-app-title" content="My App Name">

　　我還發(fā)現(xiàn)， apple-mobile-web-app-orientations接受的可能值有portrait, portrait-upside-down, landscape-right, landscape-left, portrait-any。

　　Web View更新

　　Web View（pseudobrowsers，PhoneGap/Cordova應(yīng)用程序，嵌入式瀏覽器） 上Javascript運(yùn)行比Safari慢3.3倍（或者說，Nitro引擎在Safari瀏覽器是Web應(yīng)用程序是3.3倍速度）。

　　我們可以找到一些其他的好消息：

　　遠(yuǎn)程調(diào)試

　　這是對(duì)Web開發(fā)人員一個(gè)巨大的變化。 iOS上Safari第一次，包括官方的Remote Web Inspector。 因此，iWebInspector或Weinre工具，將因?yàn)檫@個(gè)版本將變得過時(shí)。 遠(yuǎn)程調(diào)試器可以與模擬器或通過USB連接設(shè)備一起工作。

　　要啟動(dòng)遠(yuǎn)程檢查會(huì)話，你需要使用桌面Safari 6瀏覽器 。 這是壞消息：你只能在Mac桌面電腦上調(diào)試你的web應(yīng)用。 這是一個(gè)無聲的變化，但適用于Windows的Safari已不存在，所以它停留在5.x中 因此，只有與Mac OS計(jì)算機(jī)，您才可以在您的iOS設(shè)備開啟（至少現(xiàn)在正式）網(wǎng)絡(luò)調(diào)試會(huì)話。

　　出于安全考慮，您需要先啟用Web檢查器“設(shè)置”>“Safari瀏覽器”>“高級(jí)”。 新的檢查手段意味著舊的JavaScript控制臺(tái)是不可用了。

　　 您可以啟動(dòng)調(diào)試會(huì)話：

　　在談到本機(jī)應(yīng)用程序，你只可以檢查，由Xcode（自己的應(yīng)用程序）安裝在設(shè)備的應(yīng)用程序。 因此，沒有辦法在網(wǎng)站的檢查iOS上的谷歌瀏覽器。

　　 如果您正在使用Webkit Inspector 連Safari 5或Chrome，你會(huì)在Safari 6看到一個(gè)完全重新設(shè)計(jì)版本的Inspector基于Xcode的本機(jī)開發(fā)的UI。 用Inspector調(diào)式會(huì)話，您可以：

　　蘋果干得好，我們在iOS上等這個(gè)已經(jīng)很長一段時(shí)間 。 Apache Cordova 用戶使用此功能也應(yīng)該喜歡。

　　其他較小的更新

　　我們?nèi)栽诘却?/strong>

　　有一些東西，我們?nèi)匀恍枰却乱粋€(gè)版本，如：