首页 > 代码库 > width和height能够充分适应屏幕

width和height能够充分适应屏幕

我们希望flex web能够充分利用客户浏览器的内容显示空间,也希望当用户的浏览器内容空间太小的情况下不至于将我们的flex web压缩的难看,因此,我们希望flex web有个minHeight和minwidth。而width和height能够充分适应屏幕。花了几个小时解决,记载下:

1、在swfobject.js中填充代码:

function addResizeEvent(fn) {
        if (typeof win.addEventListener != UNDEF) {
            win.addEventListener("resize", fn, false);
        }
        else if (typeof doc.addEventListener != UNDEF) {
            doc.addEventListener("resize", fn, false);
        }
        else if (typeof win.attachEvent != UNDEF) {
            addListener(win, "onresize", fn);
        }
        else if (typeof win.onresize == "function") {
            var fnOld = win.onresize;
            win.onresize = function() {
                fnOld();
                fn();
            };
        }
        else {
            win.onresize = fn;
        }
    }

为了用swfobject.addResizeEvent,在swfobject原型定义上增加一行代码:

addResizeEvent: addResizeEvent,


2、修改html template,增加:

    var appSwf=null;
            var minHeight=600;
            var minWidth=900;
            
            swfobject.addLoadEvent(function(){
                appSwf=swfobject.getObjectById("${application}");
                adjustAppSwfSize();
            });
            
            swfobject.addResizeEvent(function(){
                adjustAppSwfSize();
            });

            //调整Flex app的大小。
            function adjustAppSwfSize(){
                if (appSwf!=null){
                    if (getBrowserContentWidth()<minWidth){
                        if (appSwf.width!=minWidth){
                            appSwf.width=minWidth;
                        }
                    }else if (appSwf.width!="100%"){
                        appSwf.width="100%";
                    }


                    if (getBrowserContentHeight()<minHeight){
                        if (appSwf.height!=minHeight){
                            appSwf.height=minHeight;
                        }
                    }else if (appSwf.height!="100%"){
                        appSwf.height="100%";
                    }                    
                }
            }

            //得到浏览器内容区宽度
            function getBrowserContentWidth(){
                 if (document.documentElement && document.documentElement.clientWidth) {
                        return document.documentElement.clientWidth;
                 } else if (document.body) {
                        return document.body.clientWidth;
                 }
            }
            //得到浏览器内容区高度
            function getBrowserContentHeight(){
                 if (document.documentElement && document.documentElement.clientHeight) {
                        return document.documentElement.clientHeight;
                 } else if (document.body) {
                        return document.body.clientHeight;
                 }
            }


以上代码目前的浏览器都跨了。我很久不写js代码了,生疏了。

width和height能够充分适应屏幕