2010/04/26

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

詳細 viewport 參考文件

<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

http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariHTMLRef/Introduction.html

Sarafi HTML Ref - PDF Version

http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariHTMLRef/SafariHTMLRef.pdf

Sarafi User Guide Ref

http://developer.apple.com/safari/library/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/1Introduction/Introduction.html

Sarafi User Guide Ref - PDF Version

http://developer.apple.com/safari/library/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Safari_Developer_Guide.pdf

 

 

 

 

如何讓 IE/Firefox/Chrome 可以模擬 iPhone 網頁?

安裝 Fiddler 後,透由 Customize Rules 變更 User-Agents 來進行模擬!!

 

image

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

image

沒有留言: