·您当前的位置:首页 > 技术教程 > Flex技术 >

[flex]经验:flex4宽高分辨率自适应解决方法

时间:2015-02-25 09:34酷播
[flex]经验:flex4宽高分辨率自适应解决方法,为了解决不出现滚动条,在网上找到了答案,并成功解决

首先是按照常规思维在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的设置方法也是这样。
 
然后在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%。

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器