fluid - タブアプリの流体幅が機能しない

Question

私はタブアプリを高さと幅の両方で流動的に設定しています。高さは問題ありません...それは機能していない幅なので、私のページのかなりの部分（幅はわずか648px）が表示されていません。この問題が発生しないように、意図的に幅を最大値よりも小さく設定しました。表示するには、Arrow Fastenersページ...コンテストに移動するか、タブを入力してください。

Answer 1

タブ アプリは固定幅 520px でのみ動作します。高さのみ設定可能です。

Fluid Width はキャンバス アプリ (apps.facebook.com/app-name) 専用です。そのため、これらの設定には "Canvas" (キャンバスの幅、キャンバスの高さ) というプレフィックスが付いています。

マイク

Answer 2

body 終了タグの上に、AppID と次のコードを追加します。タブで完全に機能します。

<script type="text/javascript">
fb_root = document.createElement( 'div' );
fb_root.id = 'fb-root';
try
{
    window.document.childNodes[0].appendChild( fb_root );
}
catch( error )
{
    window.document.body.appendChild( fb_root );
}

window.fbAsyncInit = function() {
    FB.init({
    appId  : '222222222222222', //your app ID
    status : true, // check login status
    cookie : true // enable cookies to allow the server to access the session
    });

    //FB.Canvas.setSize({ width: 520, height: 1400 });

    function getDocHeight() {
        var D = document;
        return Math.max(
            Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
            Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
            Math.max(D.body.clientHeight, D.documentElement.clientHeight)
        );
    }

    var mySetSize = function() {
        var height = getDocHeight();
        FB.Canvas.setSize({ width: 520, height: height });
        setTimeout( mySetSize, 200 );
    };
    setTimeout( mySetSize, 200 );
};

(function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
}());


var head = document.getElementsByTagName('head')[0],
    style = document.createElement('style'),
    rules = document.createTextNode('body { position: relative; max-width: 520px!important;width: 520px!important; overflow: hidden!important; margin: 0px!important; }');

style.type = 'text/css';
if(style.styleSheet)
    style.styleSheet.cssText = rules.nodeValue;
else style.appendChild(rules);
head.appendChild(style);

</script>