簡體   English   中英

瀏覽器顯示應用程序太大,Flex Flash

[英]Browser displaying application as too large, Flex Flash

我正在使用flash builder構建一個網站。 我建立了一個帶有縮略圖的圖庫,它沿着底部水平滾動,選中后會顯示標題和全尺寸圖像。

我遇到的問題是它在我的計算機上運行並且看起來很棒,在所有分辨率和FF,IE和Chrome中 - 然而,在我朋友的計算機上,整個應用程序對於他的瀏覽器來說太大了,所以他看到的只是標題,圖像和水平滾動條的頂部。

如何減小計算機上的顯示尺寸,以及如何確定導致錯誤的原因? 應用程序的寬度和高度都設置為100%,所以我真的不知道為什么會這樣。

感謝您的幫助和建議!

編輯

有沒有辦法測試它將顯示的屏幕大小並相應地調整應用程序的高度/寬度? 我更習慣於Flex for mobile,而不是瀏覽器......

有趣的是,當我使應用程序高度=“80%”時,它在他的計算機上使問題更加嚴重......這是違反直覺的,因為它應該使應用程序更小並且更適合他的屏幕 - 屏幕截圖有幫助嗎?

最新的編輯

好吧 - 在他的計算機上,似乎應用程序的大小調整為他的moniter大小,而不是他瀏覽器中可用的區域(moniter space減去工具欄),但是如果我調整瀏覽器大小,我的計算機會自動調整 - - >我怎么能糾正這個?

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>     

* 最新編輯 - 3月27日*

我還沒有找到這個問題的原因,如果/當我這樣做,我將更新這篇文章。 與此同時,似乎最好的解決方案是使用代碼自動調整到監視器/屏幕空間 - davidethell提供了這樣的代碼的一個很好的例子。

感謝大家的幫助!

您可以偵聽JavaScript resize事件 ,然后使用ExternalInterface調用flex resize函數。 如果您想了解您的顯示器尺寸,您可以在Capabilities類中找到它。 也可以考慮閱讀文章關於Flash在空間上可選的規模屬性的屬性。

希望這有所幫助。 祝好運。

在這種情況下我們必須做的是,如果可用的瀏覽器寬度或高度低於某個閾值,則縮小整個應用程序。 該應用並不總是看起來很好縮小,但如果要求避免滾動條你沒有太多選擇。 這是我們目前使用的代碼:

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;
}

此代碼位於主應用程序mxml文件中的函數中,並在應用程序完整處理程序中調用。 我們只需將應用程序minWidth和minHeight設置為我們的最低要求,並檢查階段尺寸。 然后我們根據更合適的比例(高度或寬度)重新縮放。

希望有所幫助。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM