拉伸应用程序的页面宽度答案

【问题标题】：Stretch page width of the application拉伸应用程序的页面宽度
【发布时间】：2011-12-09 09:37:01
【问题描述】：

我需要扩展应用程序已用空间的宽度。下图显示有空间可以使用。

图片：http://imageshack.us/photo/my-images/834/imgbe.png/

此操作的一个示例是： http://apps.facebook.com/meucalendario/

Ps：我试过使用：FB.Canvas.setAutoGrow, FB.Canvas.setSize() 但没有成功。

谢谢。

【问题讨论】：

标签： facebook resize width

【解决方案1】：

你做不到。它的最大值是 760 像素，这取决于您可以将应用程序的视口拉伸到多远。

【讨论】：

好吧，您只能对基于画布的应用程序执行此操作，并且可以通过将画布宽度设置为流体来使用页面的整个宽度。您可以从这篇 Facebook 开发者博客文章 developers.facebook.com/blog/post/549 中找到详细信息以及操作方法

【解决方案2】：

默认画布宽度为 760px，但 Facebook 最近为开发人员添加了使用 fluid 宽度的选项。这意味着您的 iframe 将具有 100% 宽度，并将根据用户的屏幕分辨率/浏览器进行扩展。

您可以阅读官方博客文章here 和一个示例（假设您已经在应用设置中设置了该选项）：

<html>
 <head>
   <title>Fluid Width HTML Example </title>
 </head>

 <body style="margin:0; padding:0; border:0; background-color:#000000">

     <div id="allContent" style="background-color: #0000FF; height:100%">
        <div id="output" style="color: #FFFFFF;" />
     </div>

     <div id="fb-root"></div>
     <script src="http://connect.facebook.net/en_US/all.js"></script>
     <script type="text/javascript">
     FB.init({
            appId  : 'APP ID',
        });

     function echoSize() {
              document.getElementById('output').innerHTML = 
                 "HTML Content Width: " + window.innerWidth + 
                 " Height: " + window.innerHeight;
              console.log(window.innerWidth + ' x ' + window.innerHeight);
        }

       echoSize();
       window.onresize = echoSize;
     </script>
  </body>
</html>

P.S.：您不能覆盖右侧的实时代码！

【讨论】：