首先是按照常规思维在app中设置
<mxml>
<s:Application .......
width="100%" height="100%"
minWidth="1280" minHeight="720">
设置Application的height和width属性,不设置minHeight和minWidth,当屏幕小于height和width时出现滚动条。
但是,这种方法可以实现滚动条,但是必须是设定height和width的固定大小,也就是说当我的屏幕大于这个设定的固定大小时,浏览器重显示的网页也只有width*height大,会出现空白区域,所以还是不能满足自适应的要求。
最终的解决方案是:
在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>