当前位置: 代码迷 >> Flex >> Flex程序顺应不同屏幕尺寸和分辨率(滚动条)
  详细解决方案

Flex程序顺应不同屏幕尺寸和分辨率(滚动条)

热度:4501   发布时间:2013-02-26 00:00:00.0
Flex程序适应不同屏幕尺寸和分辨率(滚动条)
FlashBuilder编译后自动生成的xx里面定义了浏览器如何显示滚动条。
自动生成的html页面里有如下样式定义:

        <style type="text/css" media="screen">            html, body  { height:100%; }            body { margin:0; padding:0; overflow:auto; text-align:center;                    background-color: #ffffff; }               object:focus { outline:none; }            #flashContent { display:none; }        </style>


当Flex Application的高度小于浏览器的高度时,会有一个灰色不可用的滚动条。
当Flex Application的高度大于浏览器的高度时,会出现两个滚动条。
为什么会有两个滚动条呢?
外层滚动条:
默认情况下html的滚动条是会出现的,只不过是灰色不可用状态。
内层滚动条:
body的overflow设为auto,当内容超过浏览器高度时,body的滚动条就会出现。

所以在这里,外层的滚动条基本上是没有意义的,应该手动隐藏,body的设为auto。
添加一行html{ overflow:hidden; }即可变成一个滚动条。当Flex的Application的高度高于浏览器的高度时,出现的滚动条是属于body的,我们只需关闭html的滚动条并设置body{margin:0,padding:0}即可保证只出现body的滚动条并且没有多余的空隙。


解释:
html, body  { height:100%; }是为了兼容各个浏览器。
IE 处于非标准模式时,body以窗口为高度参照,body设置为100%就可以使得页面和窗口一样高,body里面的嵌套div也可以扩展到窗口高度,这样的话可以使布局适应浏览器窗口大小。
窗体 》body》div  (html ,body {overflow:scroll}  一层滚动条)

但是当处于标准模式时,body以html标签为高度参照,html标签以窗口为参照,所以仅仅body 100%,并不能使它的子div100% 占据整个屏幕,还要使得 html 100%使得 html获得窗口大小才行。
窗体》html》body》div (html ,body {overflow:scroll}  两层滚动条 ,html的滚动条从来不会用到)


当Flex程序的内容高度大于浏览器的高度时,如何使浏览器出现滚动条呢?
如果Application标签下的子内容整体高度或宽度超过了浏览器的高度(浏览器最大化时则为屏幕最佳分辨率),我们期望浏览器出现滚动条来显示所有内容,那么你必须给Application的width和height属性显示赋值,当然该值应该是大于浏览器高度的,或者大于竖向分辨率。如果你设置Applicatioin的width=100%和height=100%或者不显示赋值,那么代表的意思都是Application的width和height与浏览器的窗口的width和height一致,那么当然是不会出现滚动条的,这时一个屏幕显示不了的内容就没有办法看到了。
案例:
假设你的屏幕分辨率是1024x768,浏览器全屏显示(此时768即为浏览器高度),
如果Application下有两个Panel,
Panel1 height=500,
Panel2 height=400,
因为500+400>768,
1) 如果你将Application的height设为大于等于900,则浏览器会出现body的滚动条,你可以通过滚动条看到两个Panel的所用内容;
2) 如果你将Application的height设为小于900,但大于768,则浏览器会出现滚动条,但是即使滑动滚动条,你也不能看到Panel2的所用内容,因为Application的高度小于内容的高度900;
3) 如果你将Application的高度设为小于768,那么你既看不到浏览器body的滚动条,也不可能看到所用的内容,超出Application高度的内容直接不显示,所以你没有办法看到。


如何让Flex程序友好的支持不同的屏幕尺寸或屏幕分辨率?

友好: 任何时候都能看到所有内容

问题:
如果Flex程序中的组件既有用百分比表示的,也有用绝对值pixel表示的,那么当将程序在某一特定分辨率调试好后,比如1600x1200,在另一低分辨率下浏览比如1024x768,你可能会发现有一部分内容看不到,而且也没有滚动条(包括浏览器滚动条和组件的滚动条)出现,让你滑动滚动条来浏览显示不下的内容。原因是绝对值定义的组件会保持大小不变,但是当屏幕尺寸变小时,那些用百分比设置的组件可能会没有足够剩余的空间分配,所以显示不出来。


解决方案建议:
1)Flex程序里的高度和宽度都用百分比表示,这样会自动缩放,只是当屏幕很小时,组件会变得很小,难以操作。这种方式下浏览器的滚动条是不会出现的。

2)Flex组件设置具体的宽度和高度,让浏览器在屏幕小时出现滚动条。为了能够做到这一点,你必须显示的设置具体的值给Application标签以及Flex组件(最好是所有组件,如果部分用百分比,屏幕小时,可能分配不到足够的空间,会显示不了内容)的width和height,不能设置百分比。对于Application的宽和高设置,你可用采用简单的方式,既设置最大的屏幕分辨率,这样在小屏幕上,就会出现浏览器的body的滚动条。优点是,你可以定义每个组件的绝对高度和宽度,缺点组件不会在屏幕小时自动缩放,但是每个组件不会变形。

3)禁用浏览器的滚动条,给主要的组件和容器设置绝对的宽度和高度。这样Flex容器会自动出现Flex组件的滚动条。既可以让一部分组件缩放变形,又可以让另一部分组件始终不变形。

如何使Flex组件的父容器出现滚动条
当组件的高度超过父容器的高度时,mx自动会出现滚动条,spark组件需要自己添加scroll组件。


预备知识:
正确认识html与body 文章一
标准与非标准模式

standard模式后,定义和解析将更加严格,所有定义必须从顶级标签html开始。

可以理解为传统非standard模式定义body的用法,standard模式下都必须在html上定义。

高度100%的意义

认为standard模式下定义容器高度100%无效,是错误的理论。

如果需要body内的容器有100%高度,必须先定义body高度100%。

html与body的默认值

1. IE6.0环境下html默认有2层border的内嵌效果,FF1.5环境下默认则没有,
2. IE6.0和FF1.5环境下的body都有一定的margin值
3. IE6.0环境下html默认就是100%高度,body则不是;FF1.5环境下html和body高度默认都不是100%,需要自定义。

一般情况下统一默认的方案:
html { height:100%; border:0;}body { height:100%; margin:0;}
滚动条的设置
可以这么认为,非standard模式页面的默认滚动条是body的,而standard则是html的。
standard模式下的body默认就没有滚动条,只是html下级的一个容器而已,这样定义会看的更清楚:
定位参照
html { background:#ccc; height:100%; border:0; overflow:scroll;}body { background:#f00; height:100%; margin:0; overflow:scroll;}

相同的道理,standard模式下当使用position方法的时候,其定位参照肯定是html,而不是非standard模式的body。

根据这个特性很容易把层覆盖在body上
参考文档:http://www.alixixi.com/web/a/2008040144652.shtml


正确认识html与body 文章二
1)在Firefox、Chrome中,DOCTYPE为XHTML 1.0 Strict下默认html和body的高度是根据内容定,在body下设置一个高度为height:100%的div并不会充满整个浏览器窗口,必须同时设置html和body的高度为100%方可使该div充满整个浏览器窗口

2)body的overflow默认值:ie6下overflow-y=scroll,overflow-x=auto;Firefox、Chrome默认均为auto. 因此如果不设置body的overflow,默认状态下ie6就会显示不合理的垂直滚动条,设overflow=auto或hidden均可解决

3)各种浏览器body的margin都不是0,因此要保证div100%高并且正好充满整个窗口,须将body的margin设为0

4)手动调整浏览器的高度时:

4-1)如果div的overflow=auto:该div会自动保持100%的高度。当窗口缩小到小于div内容的高度时,div就会出现滚动条, 这时不管body的overflow=auto或hidden,均不会出现body的滚动条。

4-2)如果div的overflow=hidden:该div会自动保持100%的高度。Firefox、Chrome、Safari、ie6的行为是一至的,该div内的溢出 部分内容均会隐藏掉,这时不管body的overflow=auto或hidden,也不会出现body的滚动条。

4-3)如果div的overflow=scroll:该div会自动保持100%的高度。Firefox、Chrome、Safari、ie6的行为是一至的,永远都出现滚动条, 这时不管body的overflow=auto或hidden,均不会出现body的滚动条。

4-4)如果div的overflow没有设置或设为visible:Firefox、Chrome、Safari的行为是一至的,该div会自动保持100%的高度,div内的溢出部分内 容会溢出显示,当窗口高度小于div的内容高度时,若body的overflow=auto,就会出现body的滚动条。IE6则比较怪异,在 窗口高度不小于div内容的高度时,该div会自动保持100%的高度;但当窗口高度小于div内容的高度时,该div不会自动保持 100%的高度,而是等于内容的高度不再变,内容不会出现溢出效果,此时若body的overflow=auto,就会出现body的滚动条。

总结:html和body的高度设为100%,body设margin=0、overflow=hidden,div设overflow=auto,各浏览器表现一至,效果最佳