本文共 2001 字，大约阅读时间需要 6 分钟。

在Flex应用开发初期，我们尝试按照常规思维设置Flex应用的宽高属性。通过为<s:Application>标签设置width="100%" height="100%" minwidth="1280" minheight="720"，可以实现全屏显示。然而，当屏幕尺寸小于1280×720时，浏览器不会自动添加滚动条，导致超出屏幕的内容无法显示。

为了解决这一问题，我们参考了多个解决方案。最初的想法是通过设置固定宽高属性来实现滚动条的显示，但这种方法存在明显局限。具体来说，当屏幕尺寸大于设置的固定宽高时，网页内容会超出屏幕范围，产生空白区域，无法实现自适应的显示效果。

最终，我们找到了一种更为有效的解决方案：通过在Flex应用的HTML模板文件中添加JavaScript代码，动态获取屏幕尺寸，并根据屏幕尺寸调整Flex容器的宽高。这种方法既能实现自适应的显示，也能确保网页内容在不同屏幕尺寸下都能完整展示。

具体实现步骤如下：

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;    }    // 获取CSS样式    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%";    }}// 初始化函数function pageInit() {    findDimensions();}// 监控屏幕尺寸变化window.onresize = findDimensions;

2. 在Flex应用中，将<s:Application>标签的宽高属性设置为width="100%" height="100%"，同时确保Flex容器的minWidth和minHeight属性设置为合适的默认值。

通过这种方式，Flex应用能够根据当前屏幕尺寸自动调整显示范围。当屏幕宽度小于1280px时，宽度将固定为1280px；当屏幕宽度大于1280px时，宽度将根据实际屏幕尺寸自动调整。同样，高度的处理方式与宽度类似。

这种解决方案在Flex应用中广泛应用，尤其是在需要在不同设备上都能良好显示的场景中。为了确保万无一失，我们还建议在Flex应用的HTML模板中，将<object>标签的宽高属性都设置为width="100%" height="100%"，以确保Flex容器能够在不同浏览器和设备上都能良好显示。

转载地址：http://qhhfk.baihongyu.com/