方法一
最繁琐但又是最好理解的,让不同分辨率用户访问不同的Html
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script language="JavaScript">
location.replace(screen.width + ".htm");//跳转到指定屏幕宽度的网页
</script>
<body>
</body>
</html>
方法二
通过div的等比例变化实现
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script language="JavaScript">
<!--
function isLayer(obj) { //判断对象是否为层的函数
/*不用 style 而用 currentStyle 的原因是因为有些层不是直接在标签内写 CSS 的,这时用 style 取不到值*/
with(obj.currentStyle) //返回布尔值true或false
return(position == "absolute" && left != "")
}
//800为800X600分辨率下窗口最大化时document.body.offsetWidth的值
var iWidth = 800
window.onload = function init() {
//匹配页面中所有标签名为DIV元素,以数组形式返回对象
var divs = document.getElementsByTagName("DIV")
for(var i = 0; i < divs.length; i++) //遍历所有DIV标签
if(isLayer(divs[i])) //判断对象是否为层,是则调整它的 X 坐标
divs[i].runtimeStyle.posLeft = parseInt(divs[i].currentStyle.left) + (document.body.offsetWidth - iWidth) / 2
iWidth = document.body.offsetWidth //保存当前文档显示区域的宽度
}
//-->
</script>
<body onresize="init()">
<div id=demo style="position:absolute;left:50px;top:100px;width:200px;height:200px;border:1px solid #000">Layer1</div>
<div id=demo1 style="position:absolute;left:250px;top:50px;width:200px;height:200px;border:1px solid #000">Layer2</div>
</body>
</html>