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

2024-05-13 14:18

本文主要是介绍Flex4 网页Application界面大小自适应屏幕,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

首先是按照常规思维在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.οnresize=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 version10.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>		

这篇关于Flex4 网页Application界面大小自适应屏幕的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/985942

相关文章

Python+PyQt5实现多屏幕协同播放功能

《Python+PyQt5实现多屏幕协同播放功能》在现代会议展示、数字广告、展览展示等场景中,多屏幕协同播放已成为刚需,下面我们就来看看如何利用Python和PyQt5开发一套功能强大的跨屏播控系统吧... 目录一、项目概述:突破传统播放限制二、核心技术解析2.1 多屏管理机制2.2 播放引擎设计2.3 专

使用Python实现获取网页指定内容

《使用Python实现获取网页指定内容》在当今互联网时代,网页数据抓取是一项非常重要的技能,本文将带你从零开始学习如何使用Python获取网页中的指定内容,希望对大家有所帮助... 目录引言1. 网页抓取的基本概念2. python中的网页抓取库3. 安装必要的库4. 发送HTTP请求并获取网页内容5. 解

Python使用DrissionPage中ChromiumPage进行自动化网页操作

《Python使用DrissionPage中ChromiumPage进行自动化网页操作》DrissionPage作为一款轻量级且功能强大的浏览器自动化库,为开发者提供了丰富的功能支持,本文将使用Dri... 目录前言一、ChromiumPage基础操作1.初始化Drission 和 ChromiumPage

Python实战之屏幕录制功能的实现

《Python实战之屏幕录制功能的实现》屏幕录制,即屏幕捕获,是指将计算机屏幕上的活动记录下来,生成视频文件,本文主要为大家介绍了如何使用Python实现这一功能,希望对大家有所帮助... 目录屏幕录制原理图像捕获音频捕获编码压缩输出保存完整的屏幕录制工具高级功能实时预览增加水印多平台支持屏幕录制原理屏幕

Python中__new__()方法适应及注意事项详解

《Python中__new__()方法适应及注意事项详解》:本文主要介绍Python中__new__()方法适应及注意事项的相关资料,new()方法是Python中的一个特殊构造方法,用于在创建对... 目录前言基本用法返回值单例模式自定义对象创建注意事项总结前言new() 方法在 python 中是一个

MySQL8.0设置redo缓存大小的实现

《MySQL8.0设置redo缓存大小的实现》本文主要在MySQL8.0.30及之后版本中使用innodb_redo_log_capacity参数在线更改redo缓存文件大小,下面就来介绍一下,具有一... mysql 8.0.30及之后版本可以使用innodb_redo_log_capacity参数来更改

java获取图片的大小、宽度、高度方式

《java获取图片的大小、宽度、高度方式》文章介绍了如何将File对象转换为MultipartFile对象的过程,并分享了个人经验,希望能为读者提供参考... 目China编程录Java获取图片的大小、宽度、高度File对象(该对象里面是图片)MultipartFile对象(该对象里面是图片)总结java获取图片

Python利用自带模块实现屏幕像素高效操作

《Python利用自带模块实现屏幕像素高效操作》这篇文章主要为大家详细介绍了Python如何利用自带模块实现屏幕像素高效操作,文中的示例代码讲解详,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1、获取屏幕放缩比例2、获取屏幕指定坐标处像素颜色3、一个简单的使用案例4、总结1、获取屏幕放缩比例from

JAVA系统中Spring Boot应用程序的配置文件application.yml使用详解

《JAVA系统中SpringBoot应用程序的配置文件application.yml使用详解》:本文主要介绍JAVA系统中SpringBoot应用程序的配置文件application.yml的... 目录文件路径文件内容解释1. Server 配置2. Spring 配置3. Logging 配置4. Ma

C#中图片如何自适应pictureBox大小

《C#中图片如何自适应pictureBox大小》文章描述了如何在C#中实现图片自适应pictureBox大小,并展示修改前后的效果,修改步骤包括两步,作者分享了个人经验,希望对大家有所帮助... 目录C#图片自适应pictureBox大小编程修改步骤总结C#图片自适应pictureBox大小上图中“z轴