网页自动适应不懂分辨率屏幕问题

来源:互联网 发布:网络监控能看到密码吗 编辑:程序博客网 时间:2024/04/30 21:23

尽管现在显示器的主流是17英寸的,但不少用户仍然使用的是15英寸的显示器。我们在用一张图片做首页时,为了能使页面在不同的分辨率下都能完美的显示出来,就需要考虑网页能否根据不同的分辨率自动显示相应的页面。

这里有一种比较简单的方法,可以轻松解决上述问题:

首先准备好要在两个不同分辨率下分别显示的文件,这里假设为 index1.html index2.html;

其次在你的首页文件 index.html 或者 index.htm的页面代码中的<head>和</head>中加入以下代码:

<script language=javascript>
<!--
function pagechange() {
if (screen.width== 1024) location.href = "index2.html";
else if(screen.width == 800) location.href = "index1.html";//在此处继续添加elseif语句可以检测更多的分辨率
else location.href= "index2.html";
}
//-->
</script>

再次,在<body>标签中添加如下代码:
onload="pagechange()";
即:<body onload="pagechange()";>

这样,你的页面边可以自适应不同的显示器分辨率了!

尽管这个页面出现的时间很短,但空空的总是感觉不太好,可以在<body>...</body>中添加如下代码以显示工作信息:
<script language=JavaScript>
 <!--
 var w=screen.width
 var h=screen.height
 document.write("系统已检测到您的分辨率为:");
 document.write("<font size=3 color=red>");
 document.write(w+"×"+h);
 document.write("</font>");
 document.write("正在进入页面转换,请稍候…");
 //-->
</script>

好,一切工作都完成了,再试试,还不错吧?
当然了,现在也有很多17的液晶了,分辨率1280×1024,也可以作一个页面~~
呵呵~~

原创粉丝点击