首页 > 代码库 > 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能够充分适应屏幕