如何讓網頁適應不同分辨率
解決思路：
在不同分辨率下看到的網頁版面格式有很大差別，甚至有可能錯位。導致這種差別的原因，主要是因為網頁中用了絕對定位的層，並且頁面內容設置為居中，這樣在分辨率改變時就會導致錯位。因此我們可以通過判斷用戶的分辨率，然后讓頁面或排版做出相應變化。
方法一：做為不同的分辨率做不同的頁，然后做個引導頁，獲取到客戶端屏幕的分辨率后轉向到相應頁
具體步驟：
1. 先捕獲用戶的分辨率。
水平分辨率：screen.width
垂直分辨率：screen.height
2.再用頁面跳轉的方法轉到相應頁。
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,大部分瀏覽器的默認客戶端腳本語言就是 JavaScript，所以也可以省略不寫。
l <!-- 和 //--> 兩個標識的作用是通知不支持 JavaScript 瀏覽器忽略兩標識間的所有 JavaScript 代碼，一般情況下可以省略不寫。
l JavaScript 語句與 C 語言一樣用分號”;”結束，但也可以省略不寫，每一新行表示開始一條新語句。
l screen.width+".htm" 在進行字符串連接后得到諸如 800.htm，1024.htm 之類的文件名。
l 可以在把完整代碼存成單獨一頁作為引導頁。
試一試：讀者可以試着用assign方法實現頁面跳轉。
方法二：根據文檔顯示區域寬度重新調整層的定位。
具體步驟：
1. 獲取文檔顯示區域的寬度。
document.body.offsetWidth
2.判斷對象是否為層。
function isLayer(obj){
with(obj.currentStyle)
return (position=="absolute"&&left!="")
}
3.完整代碼。
<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>
注意：
l 必須確保所有層的標簽為 DIV。
l 程序中的 demo 和 demo1 兩個層只是測試用的，在實際就用時可以刪掉。
技巧：如果所有層都是直接在標簽內的定義的，可以把 currentStyle 和runtimeStyle 改成 style。
提示：
l JavaScript 的單行注釋是以一對正斜杠”//”開始，多行注釋以一個正斜杠加一個星號的組合(/*)開始,並以其逆向順序 (*/)結束。
l window.onload 表示在頁面加載完成后觸發。
l onresize="init()" 表示在窗口大小改變時觸發名為 init 的函數。
分析：屏幕分辨率先是影響到文檔顯示區域寬度(document.body.offsetWIdth)大小，然后文檔顯示區域寬度大小進一步影響到層的X軸定位和頁面內容居中部分的相對位置，所以只要根據文檔顯示區域寬度大小來重新調整層的X軸坐標就行了。
特別提示
Javascript腳本的代碼原則上是要求放在代碼的 <head> 與 </head> 間，但放到其它標簽窗口內也可以正常運行，方法二中代碼運行后效果如圖 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對象代表給定元素所有可能的內嵌樣式的當前設置
網頁界面布局不會變形，實現自適應
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。