1、网页如何自动调整分辨率适应显示器分辨率方法一：很多朋友在设计网页的时候会遇到分辨率不能自动适应的问题。 做好的一个网页在另一种分辨率下显得面目全非。 特别是在做单页面的时候，通过 PS 切图出来的网页大小是固定的，用 table 百分比的方式来实现难免会使图像失真，如何使网页自动调整分辨率呢？ 这时候我们有必要换种思路来解决这个问题。 既然通过页面设计无法解决这个问题，那么我们可以尝试通过程序方法来实现。 这里我给大家介绍一种网页加载时通过 JS 来获取客户端分辨率的方式来实现网页自动调整分辨率。解决思路：创建各种分辨率下不同的首页，例如 设计 index800.htm 作为 800*600
2、下要显示的页面 设计 index1024.htm 作为 1024*768 下要显示的页面 设计 index1280.htm 作为 1280*800 下要显示的页面 创建 index.htm 作为获取客户端分辨率的页面 以下是代码片段：页面标题 function redirectPage() var url1280x800=“index1280.htm“; var url1024x768=“index1024.htm“; var url800x600=“index800.htm“; if (screen.width=1024) else if (screen.width=1280) else i
3、f (screen.width=800) else window.location.href=url1280x800; 上面这段代码就是用来判断客户端分辨率的 index.htm 文件代码 以上代码运行的步骤是： 若 screen.width=1024 screen.height=768 即在 1024*768 的分辨率下显示为变量 url1024x768 所代表的页面即 index1024.htm 若 screen.width=1280 screen.height=800 即在 1280*800 的分辨率下显示为变量 url1280x800 所代表的页面即 index1280.htm 若 s
4、creen.width=800 screen.height=600 即在 800*600 的分辨率下显示为变量 url800x600 所代表的页面即 index800.htm 若不是以上分辨率则默认显示为变量 url1280x800 所代表的页面即 index1280.htm方法二：如何让网页自动适应显示器不同的“分辨率”？解决思路： 在不同分辨率下看到的网页版面格式有很大差别，甚至有可能错位。导致这种差别的原因，主要是因为网页中用了绝对定位的层，并且页面内容设置为居中，这样在分辨率改变时就会导致错位。因此我们可以通过判断用户的分辨率，然后让页面或排版做出相应变化。方法一：做为不同的分辨率做不
5、同的页，然后做个引导页，获取到客户端屏幕的分辨率后转向到相应页 具体步骤： 1. 先捕获用户的分辨率。 水平分辨率：screen.width 垂直分辨率：screen.height 2.再用页面跳转的方法转到相应页。 location.replace(screen.width+“.htm“) 或者： location.replace(screen.height+“.htm“) 3.完整代码。 技巧：screen.width 也可以改成 screen.availWidth。 提示： l language=“JavaScript“ 指定脚本所用语言为 JavaScript,大部分浏览器的默认客户端
6、脚本语言就是 JavaScript，所以也可以省略不写。 l 两个标识的作用是通知不支持 JavaScript 浏览器忽略两标识间的所有 JavaScript 代码，一般情况下可以省略不写。 l JavaScript 语句与 C 语言一样用分号”;”结束，但也可以省略不写，每一新行表示开始一条新语句。 l screen.width+“.htm“ 在进行字符串连接后得到诸如 800.htm，1024.htm 之类的文件名。 l 可以在把完整代码存成单独一页作为引导页。 试一试：读者可以试着用 assign 方法实现页面跳转。 方法二：根据文档显示区域宽度重新调整层的定位。 具体步骤： 1. 获取
7、文档显示区域的宽度。 document.body.offsetWidth 2.判断对象是否为层。 function isLayer(obj) with(obj.currentStyle) return (position=“absolute“&left!=“) 3.完整代码。 Layer1 Layer2 注意： l 必须确保所有层的标签为 DIV。 l 程序中的 demo 和 demo1 两个层只是测试用的，在实际就用时可以删掉。 技巧：如果所有层都是直接在标签内的定义的，可以把 currentStyle 和 runtimeStyle 改成 style。 提示： l JavaScript 的单
8、行注释是以一对正斜杠”/”开始，多行注释以一个正斜杠加一个星号的组合 (/*)开始,并以其逆向顺序 (*/)结束。 l window.onload 表示在页面加载完成后触发。 l onresize=“init()“ 表示在窗口大小改变时触发名为 init 的函数。 分析：屏幕分辨率先是影响到文档显示区域宽度(document.body.offsetWIdth) 大小，然后文档显示区域宽度大小进一步影响到层的 X 轴定位和页面内容居中部分的相对位置，所以只要根据文档显示区域宽度大小来重新调整层的 X 轴坐标就行了。 特别提示 Javascript 脚本的代码原则上是要求放在代码的 与 间，但放到
9、其它标签窗口内也可以正常运行，方法二中代码运行后效果如图 3.1 和 3.2 所示： 图 3.1 窗口最大化时层的 图 3.2 窗口缩小后的层的位置 特别说明 方法一中用到了 location 对象的 replace 和 assign 方法来加载目标文档。 1. location 对象的 replace 方法是将指定的文档替换当前文档。 2. location 对象的 assign 方法是装入新的 HTML 文档。 方法二中用了 currentStyle、runtimeStyle 和 style 三个对象来捕获目标对象的样式设置。 1. currentStyle 对象代表在全局样式表、内嵌样式和 HTML 标签属性中指定的对象格式和样式。2. runtimeStyle 对象代表居于全局样式表、内嵌样式和 HTML 标签属性指定的格式和样式之上的对象的格式和样式。 3. style 对象代表给定元素所有可能的内嵌样式的当前设置
