iPhone 開發 Web 應用程式小技巧
1.特殊連結
Google Map http://maps.google.com/maps?q=<地址> 電話 call: 簡訊 sms: 郵件 mailto:
2.iPhone 桌面上建立圖示
圖示大小:57 x 57px
增加 <link rel="apple-touch-icon" href="<圖片網址>" />
例如 Hami.emome.net
http://hami.emome.net/img/hami_WebClip.png
3.版面調整
Safari on iPhone 預設版型會以一般(桌上型)呈顯,但如果下了以下這行,會直接以 iPhone 寬度限制住(如 320px or 480px)
<meta name="viewport" content="width=device-width" />
預設縮放比例為 1
<meta name="viewport" content="initial-scale = 1.0" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
4.強制不偵測電話號碼
<meta name="format-detection" content="telephone=no">
5.隱藏網址列Hide address bar
<script type="text/javascript">
if (navigator.userAgent.indexOf('iPhone') != -1) {
addEventListener("load", function() {
setTimeout(hideURLbar, 0);
}, false);
}
function hideURLbar() { window.scrollTo(0, 1); }
</script>
相關連結
Safari Dev Center
http://developer.apple.com/safari/
iPhone Development: 12 Tips To Get You Started
http://articles.sitepoint.com/article/iphone-development-12-tips
Sarafi HTML Ref
Sarafi HTML Ref - PDF Version
Sarafi User Guide Ref
Sarafi User Guide Ref - PDF Version
如何讓 IE/Firefox/Chrome 可以模擬 iPhone 網頁?
安裝 Fiddler 後,透由 Customize Rules 變更 User-Agents 來進行模擬!!
在
public static RulesOption("IE &7 (Vista)", "&User-Agents", true)
var m_IE7: boolean = false;
之下增加:
public static RulesOption("IPHONE", "&User-Agents", true)
var m_IPHONE: boolean =false;
還有另一段
if (m_IE7){
oSession.oRequest["User-Agent"] = "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; SLCC1)";
}
else
之下增加
if (m_IPHONE){
oSession.oRequest["User-Agent"] = "iPhone;Mozilla/4.0 (compatible; iphone;)";
}
else
存檔後關閉就會在下圖中出現 IPHONE