iOS平臺一直是封閉的生態圈，iOS開發者要繳納年費加入開發者計劃才可進行iOS平臺的APP開發測試，所開發的APP需要上傳到App Store經過蘋果稽核以後才可對外發布。如果要開發企業內部應用，則要繳納更高的費用購買企業賬戶才可以。
對於現在火如荼的HTML5應用，我們可以藉助PhoneGap對其打包，然後像原生APP一樣釋出它們；或者要求使用者直接通過瀏覽器訪問。前一種方式的優點是使用者體驗好，使用者可以像使用原生APP那樣使用它們，缺點是釋出很繁瑣，而且要等待蘋果稽核。後一種方式則完全不用考慮釋出的問題，但是使用者體驗比較差，畢竟讓使用者開啟瀏覽器，自行輸入網址對使用者操作水平要求較高。今天我們通過採用Hightopo的HT for Web元件，介紹另外一種方式，這種方式綜合了前面兩種方式的優點，特別適合部署企業內部應用。
手邊有iPhone或iPad的同學可以先按照下面的方式實驗：
1、用iPhone或iPad上的Safari瀏覽器開啟連結：http://pattern.dk/sun/，點選底部的傳送按鈕
2、 點選傳送到主螢幕
3、確認新增
4、檢視主屏上新增加的APP圖示
大家可以看到我們的主螢幕上已經多了一個”APP”，如果細心優化，使用者完全無法區分這是一個原生應用還是HTML5應用，極大提升了使用者體驗。
是不是很神奇？接下來我們以HT for Web的拓撲應用為例，試著實現這樣一個”高仿”的APP，先看一下我們的頁面在iPhone瀏覽器中的效果：
為了使這個頁面看起來像原生APP，我們需要在HTML頁面中加入一些特殊標記：
<!--頁面縮放方式-->
<meta name="viewport" content="user-scalable=0, initial-scale=1.0”>
<!--是否全屏顯示-->
<meta name="apple-mobile-web-app-capable" content=“yes">
<!--狀態列透明-->
<meta name="apple-mobile-web-app-status-bar-style" content=“black-translucent">
<!--APP在主屏上顯示的名字-->
<meta name="apple-mobile-web-app-title" content="ht" />
<!--App在主屏上顯示的圖示-->
<link rel="apple-touch-icon" href="res/icon.png">
<!--啟動畫面-->
<!-- iPhone5-->
<link rel="apple-touch-startup-image" href="res/girl_iphone5.png">
<!-- iPhone6-->
<link rel="apple-touch-startup-image" href="res/girl_iphone6.png" media="screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" />
viewport的設定可以參考蘋果的官方文件，寫的非常棒。
其它meta標籤的用法也有很好的參考文件，推薦大家仔細閱讀：