浏览器显示应用程序太大，Flex Flash

Question

I am building a website with flash builder. 我正在使用flash builder构建一个网站。 I built a gallery with thumbnails that scroll horizontally along the bottom, and when selected show a title and fullsize image. 我建立了一个带有缩略图的图库，它沿着底部水平滚动，选中后会显示标题和全尺寸图像。

The problem I am having is that it works and looks great on my computer, in all resolutions and FF, IE and Chrome - however, on my friend's computer, the entire application is too big for his browser, so all he sees is the title, image and the very top of the horizontal scrollbar. 我遇到的问题是它在我的计算机上运行并且看起来很棒，在所有分辨率和FF，IE和Chrome中 - 然而，在我朋友的计算机上，整个应用程序对于他的浏览器来说太大了，所以他看到的只是标题，图像和水平滚动条的顶部。

How do I decrease the size of display on his computer, and how do I determine what is causing the misfit? 如何减小计算机上的显示尺寸，以及如何确定导致错误的原因？ The application width and height are both set to 100%, so I really don't know why this is happening. 应用程序的宽度和高度都设置为100％，所以我真的不知道为什么会这样。

Thank you for any help and advice! 感谢您的帮助和建议！

EDIT 编辑

Is there maybe a way to test the size of the screen that it will be displayed on and adjust the application height/width accordingly? 有没有办法测试它将显示的屏幕大小并相应地调整应用程序的高度/宽度？ I am more accustomed to Flex for mobile, not browser... 我更习惯于Flex for mobile，而不是浏览器......

Interestingly, when I made application height ="80%", it made the problem even worse on his computers... which is counterintuitive because it should have made the application smaller and more able to fit his screen - would a screen shot help? 有趣的是，当我使应用程序高度=“80％”时，它在他的计算机上使问题更加严重......这是违反直觉的，因为它应该使应用程序更小并且更适合他的屏幕 - 屏幕截图有帮助吗？

NEWEST EDIT 最新的编辑

Alright - on his computers, it appears the application is being resized to the size of his moniter and not to the area available within his browser (moniter space minus toolbars), but with MY Computers it is adjusting automatically if I resize the browser ---> How can I correct this? 好吧 - 在他的计算机上，似乎应用程序的大小调整为他的moniter大小，而不是他浏览器中可用的区域（moniter space减去工具栏），但是如果我调整浏览器大小，我的计算机会自动调整 - - >我怎么能纠正这个？

HTML EMBED CODE: HTML嵌入代码：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

This application was built using Adobe Flex, an open source framework
for building rich Internet applications that get delivered via the
Flash Player or to desktops via Adobe AIR. 

Learn more about Flex at http://flex.org 
// -->
<head>
    <title></title>
    <meta name="google" value="notranslate" />         
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- Include CSS to eliminate any default margins/padding and set the height of the html element and 
         the body element to 100%, because Firefox, or any Gecko based browser, interprets percentage as 
         the percentage of the height of its parent container, which has to be set explicitly.  Fix for
         Firefox 3.6 focus border issues.  Initially, don't display flashContent div so it won't show 
         if JavaScript disabled.
    -->
    <style type="text/css" media="screen"> 
        html, body  { height:100%; }
        body { margin:0; padding:0; overflow:auto; text-align:center; 
               background-color: #000000; }   
        object:focus { outline:none; }
        #flashContent { display:none; }
    </style>

    <!-- Enable Browser History by replacing useBrowserHistory tokens with two hyphens -->
    <!-- BEGIN Browser History required section -->
    <link rel="stylesheet" type="text/css" href="history/history.css" />
    <script type="text/javascript" src="history/history.js"></script>
    <!-- END Browser History required section -->  

    <script type="text/javascript" src="swfobject.js"></script>
    <script type="text/javascript">
        // For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection. 
        var swfVersionStr = "11.1.0";
        // To use express install, set to playerProductInstall.swf, otherwise the empty string. 
        var xiSwfUrlStr = "playerProductInstall.swf";
        var flashvars = {};
        var params = {};
        params.quality = "high";
        params.bgcolor = "#000000";
        params.allowscriptaccess = "sameDomain";
        params.allowfullscreen = "true";
        var attributes = {};
        attributes.id = "PhotoGallery";
        attributes.name = "PhotoGallery";
        attributes.align = "middle";
        swfobject.embedSWF(
            "PhotoGallery.swf", "flashContent", 
            "100%", "100%", 
            swfVersionStr, xiSwfUrlStr, 
            flashvars, params, attributes);
        // JavaScript enabled so display the flashContent div in case it is not replaced with a swf object.
        swfobject.createCSS("#flashContent", "display:block;text-align:left;");
    </script>
</head>
<body>
    <!-- SWFObject's dynamic embed method replaces this alternative HTML content with Flash content when enough 
         JavaScript and Flash plug-in support is available. The div is initially hidden so that it doesn't show
         when JavaScript is disabled.
    -->
    <div id="flashContent">
        <p>
            To view this page ensure that Adobe Flash Player version 
            11.1.0 or greater is installed. 
        </p>
        <script type="text/javascript"> 
            var pageHost = ((document.location.protocol == "https:") ? "https://" : "http://"); 
            document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='" 
                            + pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>" ); 
        </script> 
    </div>

    <noscript>
        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="PhotoGallery">
            <param name="movie" value="PhotoGallery.swf" />
            <param name="quality" value="high" />
            <param name="bgcolor" value="#000000" />
            <param name="allowScriptAccess" value="sameDomain" />
            <param name="allowFullScreen" value="true" />
            <!--[if !IE]>-->
            <object type="application/x-shockwave-flash" data="PhotoGallery.swf" width="100%" height="100%">
                <param name="quality" value="high" />
                <param name="bgcolor" value="#000000" />
                <param name="allowScriptAccess" value="sameDomain" />
                <param name="allowFullScreen" value="true" />
            <!--<![endif]-->
            <!--[if gte IE 6]>-->
                <p> 
                    Either scripts and active content are not permitted to run or Adobe Flash Player version
                    11.1.0 or greater is not installed.
                </p>
            <!--<![endif]-->
                <a href="http://www.adobe.com/go/getflashplayer">
                    <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash Player" />
                </a>
            <!--[if !IE]>-->
            </object>
            <!--<![endif]-->
        </object>
    </noscript>

* Latest Edit - march 27 * * 最新编辑 - 3月27日*

I haven't found the cause of this problem yet, and if/when I do I'll update this post. 我还没有找到这个问题的原因，如果/当我这样做，我将更新这篇文章。 In the meantime, it seems the best solution is using code to automatically adjust to the monitor/screen space - davidethell provided a good example of such code. 与此同时，似乎最好的解决方案是使用代码自动调整到监视器/屏幕空间 - davidethell提供了这样的代码的一个很好的例子。

Thanks to all for the help! 感谢大家的帮助！

Answer 1

You can listen to JavaScript resize event , and then call your flex resize function using ExternalInterface . 您可以侦听JavaScript resize事件，然后使用ExternalInterface调用flex resize函数。 If you want to find out what is your monitor size you can simply find it in the Capabilities class. 如果您想了解您的显示器尺寸，您可以在Capabilities类中找到它。 Also consider reading this article about flash attributes at spatially optional scale attribute. 也可以考虑阅读此文章关于Flash在空间上可选的规模属性的属性。

Hope this was helping. 希望这有所帮助。 Good luck. 祝好运。

Answer 2

What we've had to do in situations like this is scale the entire application down if the available browser width or height is below a certain threshold. 在这种情况下我们必须做的是，如果可用的浏览器宽度或高度低于某个阈值，则缩小整个应用程序。 The app doesn't always look as nice scaled down, but if it is a requirement to avoid scroll bars you don't have much choice. 该应用并不总是看起来很好缩小，但如果要求避免滚动条你没有太多选择。 Here is the code we use currently: 这是我们目前使用的代码：

if ( stage.stageWidth < this.minWidth || stage.stageHeight < this.minHeight ) {
    var widthDiff : Number = stage.stageWidth / this.minWidth;
    var heightDiff : Number = stage.stageHeight / this.minHeight;
    var rescalePercent : Number = ( heightDiff < widthDiff ) ? heightDiff : widthDiff;
    this.scaleX = rescalePercent * 0.8;
    this.scaleY = rescalePercent * 0.8;
}

This code is in a function in the main app mxml file and is called in the application complete handler. 此代码位于主应用程序mxml文件中的函数中，并在应用程序完整处理程序中调用。 We just set the application minWidth and minHeight accordingly to our minimum requirements and check the stage dimensions. 我们只需将应用程序minWidth和minHeight设置为我们的最低要求，并检查阶段尺寸。 Then we rescale based on whichever ratio was more appropriate (height or width). 然后我们根据更合适的比例（高度或宽度）重新缩放。

Hope that helps. 希望有所帮助。

浏览器显示应用程序太大，Flex Flash

问题描述

2 个解决方案

解决方案1
1 2012-03-22 18:35:18

解决方案2
1 已采纳 2012-03-27 09:51:00

浏览器显示应用程序太大，Flex Flash

问题描述

2 个解决方案

解决方案1 1 2012-03-22 18:35:18

解决方案2 1 已采纳 2012-03-27 09:51:00

解决方案1
1 2012-03-22 18:35:18

解决方案2
1 已采纳 2012-03-27 09:51:00