html自动适应分辨率,自适应分辨率html

/*去掉全局边框，页面就正常了(就没有滚动条了)*/

div{

border: 1px solid red;

}

img{

border: 1px solid red;

}

font{

border: 1px solid red;

}

ul{

border: 1px solid red;

}

body{

background-color:yellow;

}

1

2

3

4

5

6

window.οnresize=function(){

init_main(1);

}

/**

* @param scale 主体占窗口比例

* @return

*/

function init_main(scale){

var innerWidth=window.innerWidth;

var innerHeight=window.innerHeight;

var main=document.getElementById("main");

//主体比例为16:9

if(innerWidth

main.style.width=innerWidth;

main.style.height=(parseInt(main.clientWidth/(16/9)));

return;

}

if(innerWidth>innerHeight){

main.style.width=innerWidth*scale;

main.style.height=(parseInt(main.clientWidth/(16/9)));

}

var main_width=main.clientWidth;

var main_height=main.clientHeight;

if(main_height>innerHeight){

init_main(scale-0.001);

}

document.getElementById("info").innerHTML=innerWidth+"-"+innerHeight+"-"+main.style.width+"-"+main.style.height;

}

init_main(1);