  如何讓網(wǎng)頁自動(dòng)適應(yīng)顯示器不同的“分辨率” [原文地址]
如何讓網(wǎng)頁適應(yīng)不同分辨率
解決思路：
在不同分辨率下看到的網(wǎng)頁版面格式有很大差別，甚至有可能錯(cuò)位。導(dǎo)致這種差別的原因，主要是因?yàn)榫W(wǎng)頁中用了絕對(duì)定位的層，并且頁面內(nèi)容設(shè)置為居中，這樣在分辨率改變時(shí)就會(huì)導(dǎo)致錯(cuò)位。因此我們可以通過判斷用戶的分辨率，然后讓頁面或排版做出相應(yīng)變化。
方法一：做為不同的分辨率做不同的頁，然后做個(gè)引導(dǎo)頁，獲取到客戶端屏幕的分辨率后轉(zhuǎn)向到相應(yīng)頁
具體步驟：
1. 先捕獲用戶的分辨率。
水平分辨率：screen.width
垂直分辨率：screen.height
2.再用頁面跳轉(zhuǎn)的方法轉(zhuǎn)到相應(yīng)頁。
location.replace(screen.width+".htm")
或者：
location.replace(screen.height+".htm")
3.完整代碼。
<script language="JavaScript">
<!--
location.replace(screen.width+".htm");
//-->
</script>
技巧：screen.width 也可以改成 screen.availWidth。
提示：
l language="JavaScript" 指定腳本所用語言為 JavaScript,大部分瀏覽器的默認(rèn)客戶端腳本語言就是 JavaScript，所以也可以省略不寫。
l <!-- 和 //--> 兩個(gè)標(biāo)識(shí)的作用是通知不支持 JavaScript 瀏覽器忽略兩標(biāo)識(shí)間的所有 JavaScript 代碼，一般情況下可以省略不寫。
l JavaScript 語句與 C 語言一樣用分號(hào)”;”結(jié)束，但也可以省略不寫，每一新行表示開始一條新語句。
l screen.width+".htm" 在進(jìn)行字符串連接后得到諸如 800.htm，1024.htm 之類的文件名。
l 可以在把完整代碼存成單獨(dú)一頁作為引導(dǎo)頁。
試一試：讀者可以試著用assign方法實(shí)現(xiàn)頁面跳轉(zhuǎn)。
方法二：根據(jù)文檔顯示區(qū)域?qū)挾戎匦抡{(diào)整層的定位。
具體步驟：
1. 獲取文檔顯示區(qū)域的寬度。
document.body.offsetWidth
2.判斷對(duì)象是否為層。
function isLayer(obj){
with(obj.currentStyle)
return (position=="absolute"&&left!="")
}
3.完整代碼。
<script language="JavaScript">
<!--
function isLayer(obj){ //判斷對(duì)象是否為層的函數(shù)
/*不用 style 而用 currentStyle 的原因是因?yàn)橛行硬皇侵苯釉跇?biāo)簽內(nèi)寫 CSS 的，這時(shí)用 style 取不到值*/
with(obj.currentStyle) //返回布爾值true或false
return (position=="absolute"&&left!="")
}
//800為800X600分辨率下窗口最大化時(shí)document.body.offsetWidth的值
var iWidth=800
window.onload=function init(){
//匹配頁面中所有標(biāo)簽名為DIV元素，以數(shù)組形式返回對(duì)象
var divs=document.getElementsByTagName("DIV")
for(var i=0;i<divs.length;i++)//遍歷所有DIV標(biāo)簽
if(isLayer(divs))//判斷對(duì)象是否為層，是則調(diào)整它的 X 坐標(biāo)
divs.runtimeStyle.posLeft=parseInt(divs.currentStyle.left)+(document.body.offsetWidth-iWidth)/2
iWidth=document.body.offsetWidth //保存當(dāng)前文檔顯示區(qū)域的寬度
}
//-->
</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>
注意：
l 必須確保所有層的標(biāo)簽為 DIV。
l 程序中的 demo 和 demo1 兩個(gè)層只是測(cè)試用的，在實(shí)際就用時(shí)可以刪掉。
技巧：如果所有層都是直接在標(biāo)簽內(nèi)的定義的，可以把 currentStyle 和runtimeStyle 改成 style。
提示：
l JavaScript 的單行注釋是以一對(duì)正斜杠”//”開始，多行注釋以一個(gè)正斜杠加一個(gè)星號(hào)的組合(/*)開始,并以其逆向順序 (*/)結(jié)束。
l window.onload 表示在頁面加載完成后觸發(fā)。
l onresize="init()" 表示在窗口大小改變時(shí)觸發(fā)名為 init 的函數(shù)。
分析：屏幕分辨率先是影響到文檔顯示區(qū)域?qū)挾?document.body.offsetWIdth)大小，然后文檔顯示區(qū)域?qū)挾却笮∵M(jìn)一步影響到層的X軸定位和頁面內(nèi)容居中部分的相對(duì)位置，所以只要根據(jù)文檔顯示區(qū)域?qū)挾却笮碇匦抡{(diào)整層的X軸坐標(biāo)就行了。
特別提示
Javascript腳本的代碼原則上是要求放在代碼的 <head> 與 </head> 間，但放到其它標(biāo)簽窗口內(nèi)也可以正常運(yùn)行，方法二中代碼運(yùn)行后效果如圖 3.1 和 3.2 所示：
圖 3.1 窗口最大化時(shí)層的
圖 3.2 窗口縮小后的層的位置
特別說明
方法一中用到了 location 對(duì)象的 replace 和 assign 方法來加載目標(biāo)文檔。
1. location對(duì)象的replace方法是將指定的文檔替換當(dāng)前文檔。
2. location對(duì)象的assign方法是裝入新的HTML文檔。
方法二中用了 currentStyle、runtimeStyle 和 style 三個(gè)對(duì)象來捕獲目標(biāo)對(duì)象的樣式設(shè)置。
1. currentStyle對(duì)象代表在全局樣式表、內(nèi)嵌樣式和 HTML 標(biāo)簽屬性中指定的對(duì)象格式和樣式。
2. runtimeStyle對(duì)象代表居于全局樣式表、內(nèi)嵌樣式和 HTML 標(biāo)簽屬性指定的格式和樣式之上的對(duì)象的格式和樣式。
3. style對(duì)象代表給定元素所有可能的內(nèi)嵌樣式的當(dāng)前設(shè)置
|
