很多朋友在设计网页的时候会遇到分辨率不能自动适应的问题。
做好的一个网页在另一种分辨率下显得面目全非。
特别是在做单页面的时候，通过PS切图出来的网页大小是固定的，用table百分比的方式来实现难免会使图像失真，如何使网页自动调整分辨率呢？
这时候我们有必要换种思路来解决这个问题。
既然通过页面设计无法解决这个问题，那么我们可以尝试通过程序方法来实现。
这里我给大家介绍一种网页加载时通过JS来获取客户端分辨率的方式来实现网页自动调整分辨率。
解决思路：创建各种分辨率下不同的首页，例如
设计index800.htm作为800*600下要显示的页面
设计index1024.htm作为1024*768下要显示的页面
设计index1280.htm作为1280*800下要显示的页面
创建index.htm作为获取客户端分辨率的页面
以下是代码片段：
<html>
<head>
<title>页面标题</title>
<script language="JavaScript">
function redirectPage()
{
var url1280x800="index1280.htm";
var url1024x768="index1024.htm";
var url800x600="index800.htm";
if ((screen.width==1024)&&(screen.height==768))
window.location.href=url1024x768;
else if ((screen.width==1280)&&(screen.height==800))
window.location.href=url1280x800;
else if ((screen.width==800)&&(screen.height==600))
window.location.href=url800x600;
else window.location.href=url1280x800;
}
</script>
</head>
<body OnLoad="redirectPage();">
</body>
</html>
上面这段代码就是用来判断客户端分辨率的index.htm文件代码
以上代码运行的步骤是：
若screen.width=1024 screen.height=768即在1024*768的分辨率下显示为变量url1024x768所代表的页面即index1024.htm
若screen.width=1280 screen.height=800即在1280*800的分辨率下显示为变量url1280x800所代表的页面即index1280.htm
若screen.width=800 screen.height=600即在800*600的分辨率下显示为变量url800x600所代表的页面即index800.htm
若不是以上分辨率则默认显示为变量url1280x800所代表的页面即index1280.htm
2150
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
