2012年3月4日 星期日

Use getPixelRatio for HTML5 on retina

如果用 HTML5 配 WebView 來作 App 的話,
在 iPhone4 跟一些 Android 手機會碰到的解析度問題 ,

iPhone4 的 Retina 是 960 x 640,
但是在 WebView 底下會以 480 x 320 來顯示,

所以須要利用到 javascript 的 getPixelRatio() 來作調整,

/**
 * Return current device resolution pixel ratio, Default is 1.
 * @return {number}
 */
function getDevicePixelRatio() {
       
    if (window.devicePixelRatio === undefined) {
        return 1;
    }
       
    return window.devicePixelRatio;
}


這裡寫一支 function 來取得裝置的 PixelRatio,一般通常都 return 1,
解析度較大的手機才會回傳其他數值,例如 iPhone4 則回傳 2,

最後寫一支 initDeviceViewport 的 function 來塞值給 viewport metadata tag,
例如這裡 iPhone4 會將 viewport 的 scale 全部縮放為 0.5 倍。

/**
 * Initialize device viewport meta tag to full screen size.
 * @author http://jsway.se/?p=150
 */
function initDeviceViewport() {
       
    var scale = 1;
    var ratio = getDevicePixelRatio();
    if (ratio !== 1) {
        scale = 1 / ratio;
        scale = scale.toFixed(1);
    }
        
    var viewport = document.getElementById("viewport");
    var vp_width = "width=device-width; ";
    var vp_initial_scale = "initial-scale="+scale+"; ";
    var vp_maximum_scale  = "maximum-scale="+scale+"; ";
    var vp_minimum_scale = "minimum-scale="+scale+"; ";
    var vp_user_scalable = "user-scalable=0;";
       
    viewport.attributes.content.value =
        vp_width+
        vp_initial_scale+
        vp_minimum_scale+
        vp_maximum_scale+
        vp_user_scalable;
}


參考:
RETINA DISPLAY AND WEB DEVELOPMENT

Javascript message on Facebook post feed

之前在使用Facebook API的時候碰到的問題,,筆記一下。

如果在沒有登入Facebook的情況下開啟 Feed Dialog 發佈訊息,
會被導到一個莫名其妙的頁面,上面只有一串 javascript 如下

<script type="text/javascript">
window.location.href="fbconnect:\/\/success?
post_id=XXXXXX;
</script>

這個問題我碰到兩次,
一次是在網頁版直接使用 Graph API call 的方式開啟 Feed Dialog,
一次是在 iOS Facebook SDK 中使用 Feed Dialog,

iOS好像是在4.0以下才會發生,不太確定,

解決方法:
找到呼叫 Graph API 的地方 ( iOS SDK 應該在 Dialog 相關的檔案裡)
將 https://m.facebbok.com/dialog/feed?xxxxxx
的 改成 www
還是不行的話就把 https 改成 http 試試,應該可以解決~

參考:
Javascript message on Facebook Connect post to feed in iPhone/iPad app