Flex4 网页Application界面大小自适应屏幕

发布时间：2020-12-15 03:42:29 所属栏目：百科来源：网络整理

导读：首先是按照常规思维在app中设置 mxmls:Application .......width="100%" height="100%"minWidth="1280" minHeight="720" 这样确实可以全屏，但是当屏幕缩放到小于1280*720时，浏览器并不会自动添加滚动条，所以网页超出屏幕大小的内容就看不到了。为了解决

首先是按照常规思维在app中设置

<mxml>
<s:Application .......
width="100%" height="100%"
minWidth="1280" minHeight="720">

这样确实可以全屏，但是当屏幕缩放到小于1280*720时，浏览器并不会自动添加滚动条，所以网页超出屏幕大小的内容就看不到了。

为了解决不出现滚动条，在网上找到了答案，并成功解决

http://stackoverflow.com/questions/4259434/flex-4-sscroll

设置Application的height和width属性，不设置minHeight和minWidth，当屏幕小于height和width时出现滚动条。

但是，这种方法可以实现滚动条，但是必须是设定height和width的固定大小，也就是说当我的屏幕大于这个设定的固定大小时，浏览器重显示的网页也只有width*height大，会出现空白区域，所以还是不能满足自适应的要求。

最终的解决方案是：

?<http://wbgen.com/blog/flex4%E8%AE%A9%E6%B5%8F%E8%A7%88%E5%99%A8%E7%AA%97%E5%8F%A3%E5%B0%8F%E4%BA%8Eapplication%E5%A4%A7%E5%B0%8F%E6%97%B6%E5%87%BA%E7%8E%B0%E6%BB%9A%E5%8A%A8%E6%9D%A1>

在index.template.html文件（位于Flex项目文件中的html-template文件夹下）中添加js脚本，实现读取当前屏幕大小，判断获取的屏幕width小于1280px时width取1280px，当大于时，width去获取的屏幕width，height的设置方法也是这样。

var winWidth = 0;
 var winHeight = 0;
 function findDimensions()
 {
  //获取窗口宽度
  if (window.innerWidth)
  {
   winWidth = window.innerWidth;
  }
  else if ((document.body) && (document.body.clientWidth))
  {
   winWidth = document.body.clientWidth; //获取窗口高度
  }
  if (window.innerHeight)
  {
   winHeight = window.innerHeight;
  }
  else if ((document.body) && (document.body.clientHeight))
  {
   winHeight = document.body.clientHeight;
  }
  //通过深入Document内部对body进行检测，获取窗口大小
  if (document.documentElement  && document.documentElement.clientHeight && document.documentElement.clientWidth)
  {
  winHeight = document.documentElement.clientHeight;
  winWidth = document.documentElement.clientWidth;
  }  
 
  var cssSize = document.styleSheets[0].rules||document.styleSheets[0].cssRules;
  if(winWidth < 1280)
  {
  cssSize[0].style.width = "1280px";
  }
  else
  {
  cssSize[0].style.width = "100%";
  }
 
  if(winHeight < 720)
  {
  cssSize[0].style.height = "720px";
  }
  else
  {
  cssSize[0].style.height = "100%";
  }
 }
 
 window.onresize=findDimensions;  
 
 function pageInit() {
    //调用函数，获取数值
   findDimensions();
 }

然后在Flex中App中设置

width="100%" height="100%"

这样即可实现自适应的同时设定网页的最小width和height。

在ie8中，“开发人员工具”中“脚本”中就可以看到这个index.template.html文件了，所以flex网页最终也是以html形式存在，flex生成的swf网页只是html中的一个object

为了确保万无一失，我将index.template.html中object的width和height都设成100%。

	<noscript>
            <span style="color:#ff0000;"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="MainFx7"></span>
                <param name="movie" value="MainFx7.swf" />
                <param name="quality" value="high" />
                <param name="bgcolor" value="#ffffff" />
                <param name="allowScriptAccess" value="sameDomain" />
                <param name="allowFullScreen" value="true" />
                <!--[if !IE]>-->
                <object type="application/x-shockwave-flash" data="MainFx7.swf" width="100%" height="100%">
                    <param name="quality" value="high" />
                    <param name="bgcolor" value="#ffffff" />
                    <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
                		10.0.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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!