網(wǎng)如何自動調(diào)整分辨率適應(yīng)顯示器分辨率_第1頁
網(wǎng)如何自動調(diào)整分辨率適應(yīng)顯示器分辨率_第2頁
網(wǎng)如何自動調(diào)整分辨率適應(yīng)顯示器分辨率_第3頁
網(wǎng)如何自動調(diào)整分辨率適應(yīng)顯示器分辨率_第4頁
全文預(yù)覽已結(jié)束

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

1、網(wǎng)頁如何自動調(diào)整分辨率適應(yīng)顯示器分辨率方法一：很多朋友在設(shè)計網(wǎng)頁的時候會遇到分辨率不能自動適應(yīng)的問題。做好的一個網(wǎng)頁在另一種分辨率下顯得面目全非。特別是在做單頁面的時候，通過PS切圖出來的網(wǎng)頁大小是固定的，用 table百分比的方式來實現(xiàn)難免會使圖像失真，如何使網(wǎng)頁自動調(diào)整分辨率呢？ 這時候我們有必要換種思路來解決這個問題。既然通過頁面設(shè)計無法解決這個問題，那么我們可以嘗試通過程序方法來實現(xiàn)。這里我給大家介紹一種網(wǎng)頁加載時通過JS來獲取客戶端分辨率的方式來實現(xiàn)網(wǎng)頁自動調(diào)整分辨率。解決思路：創(chuàng)建各種分辨率下不同的首頁，例如設(shè)計index800.htm作為800*600下要顯示的頁面設(shè)計index

2、1024.htm作為1024*768下要顯示的頁面設(shè)計index1280.htm作為1280*800下要顯示的頁面創(chuàng)建index.htm作為獲取客戶端分辨率的頁面以下是代碼片段：<html><head><title> 頁面標(biāo)題 </title>script language="JavaScript">function redirectPage()(var url1280x800="index1280.htm"var url1024x768="index1024.htm”;var url800

3、x600="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.loc

4、ation.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 即在

5、 1280*800 的分辨率下顯示為變量url1280x800 所代表的頁面即 index1280.htm若screen.width=800 screen.height=600即在800*600的分辨率下顯示為變量url800x600所代表的頁面 即 index800.htm若不是以上分辨率則默認(rèn)顯示為變量url1280x800所代表的頁面即index1280.htm方法二：如何讓網(wǎng)頁自動適應(yīng)顯示器不同的分辨率”？解決思路：在不同分辨率下看到的網(wǎng)頁版面格式有很大差別，甚至有可能錯位。導(dǎo)致這種差別的原因，主要是因為網(wǎng)頁中用了 絕對定位 的層,并且頁面內(nèi)容設(shè)置為居中，這樣在分辨率改變時就會導(dǎo)致錯位

6、。因 此我們可以通過判斷用戶的分辨率，然后讓頁面或排版做出相應(yīng)變化。方法一：做為不同的分辨率做不同的頁，然后做個引導(dǎo)頁，獲取到客戶端屏幕的分辨率后轉(zhuǎn)向到相 應(yīng)頁具體步驟：1. 先捕獲用戶的分辨率。水平分辨率：screen.width垂直分辨率：screen.height2. 再用頁面跳轉(zhuǎn)的方法轉(zhuǎn)到相應(yīng)頁。location.replace(screen.width+".htm")或者：location.replace(screen.height+".htm")3. 完整代碼。<scr ip t language="Jav aS cript&

7、quot;><!-location.replace(screen.width+".htm");/-></script>技巧：screen.width也可以改成 screen.availWidth 。提示：l language="JavaScript_"指定腳本所用語言為JavaScript,大部分瀏覽器的默認(rèn)客戶端腳本語言就是JavaScript ,所以也可以省略不寫。l <!- 和/-> 兩個標(biāo)識的作用是通知不支持 JavaScript 瀏覽器忽 略兩標(biāo)識間的所 有 JavaScript 代碼，一般情況下可以省

8、略不寫。l JavaScript 語句與C語言一樣用分號”結(jié)束，但也可以省略不寫，每一新行表示開始一條新語 句。l screen.width+".htm"在進(jìn)行字符串連接后得到諸如800.htm , 1024.htm之類的文件名。l可以在把完整代碼存成單獨一頁作為引導(dǎo)頁。 試一試：讀者可以試著用assign方法實現(xiàn)頁面跳轉(zhuǎn)。方法二：根據(jù)文檔顯示區(qū)域?qū)挾戎匦抡{(diào)整層的定位。 具體步驟：1. 獲取文檔顯示區(qū)域的寬度。document.body.offsetWidth2. 判斷對象是否為層。function isLayer(obj) with(obj.currentStyle) r

9、eturn (position="absolute"&&left!="") 3. 完整代碼。<script language="JavaScript"> <!- function isLayer(obj) /判斷對象是否為層的函數(shù)/*不用style 而用currentStyle的原因是因為有些層不是直接在標(biāo)簽內(nèi)寫CSS的，這時用style 取不到值*/ with(obj.currentStyle) / 返回布爾值 true 或 false return (position="absolute

10、"&amp;amp;&amp;amp;left!="") /800 為 800X600 分辨率下窗口最大化時document.body.offsetWidth 的值var iWidth=800 window.onload=function init() /匹配頁面中所有標(biāo)簽名為DIV元素，以數(shù)組形式返回對象var divs=document.get ElementsByTagName("DIV")for(var i=0;i<divs.length;i+)/遍歷所有 DIV 標(biāo)簽if(isLayer(divsi)/判斷對象是

11、否為層，是則調(diào)整它的X坐標(biāo)divsi.runtimeStyle.posLeft=parseInt(divsi.currentStyle.left)+(document.body.offs etWidth-iWidth)/2 iWidth=document.body.offsetWidth /保存當(dāng)前文檔顯示區(qū)域的寬度 /-> </script> <body onresize="init()”> <divid=demoid=demo1style="position:absolute;left:50px;top:100px;width:200

12、px;height:200px;border:1px solid #000”>Layer1</div> <div style="position:absolute;left:250px;top:50px;width:200px;height:200px;border:1px solid #000">Layer2</div>注意：l必須確保所有層的標(biāo)簽為DIV。l程序中的demo 和demol兩個層只是測試用的，在實際就用時可以刪掉。技巧：如果所有層都是直接在標(biāo)簽內(nèi)的定義的，可以把currentstyle 和runtimestyle

13、改成style 。 提示：l JavaScript 的單行注釋是以一對正斜杠”開'始，多行注釋以一個正斜杠加一個星號的組合(/*)開始，并以其逆向順序(*/)結(jié)束。l window.onload表示在頁面加載完成后觸發(fā)。l onresize="init()"表示在窗口大小改變時觸發(fā)名為init的函數(shù)。分析：屏幕分辨率先是影響到文檔顯示區(qū)域?qū)挾?document.body.offsetWIdth) 大小，然后文檔顯示區(qū)域?qū)挾却笮∵M(jìn)一步影響到層的X軸定位和頁面內(nèi)容居中部分的相對位置，所以只要根據(jù)文檔顯示區(qū)域?qū)挾却笮碇匦抡{(diào)整層的X軸坐標(biāo)就行了。特別提示 Javascript腳本的代碼原則上是要求放在代碼的<head> 與</head> 間，但放到其它標(biāo)簽窗口內(nèi)也可以正常運行，方法二中代碼運行后效果如圖3.1和3.2所示：圖3.1窗口最大化時層的圖3.2窗口縮小后的層的位置特別說明方法一中用到了location 對象的replace 和assign方法來加載目標(biāo)文檔。1. location 對象的replace方法是將指定的文檔替換當(dāng)前文檔。2. location 對象的assign

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論