讓網(wǎng)頁(yè)適應(yīng)不同尺寸的顯示器

   17寸顯示器在今年已是無(wú)可爭(zhēng)議的主流配置，而15寸彩顯獨(dú)領(lǐng)風(fēng)騷的時(shí)間不過(guò)才兩年，這一問(wèn)題給網(wǎng)頁(yè)制作帶來(lái)的問(wèn)題是: 15寸彩顯與17寸彩顯除了本身在物理顯示面積上的差距外，15寸顯示器還往往采用800×600分辨率，而 17寸顯示器則基本采用1024×768分辨率，這就造成兩類(lèi)顯示器在顯示面積上有很大的差異。在15寸顯示器上顯示正常的頁(yè)面到17寸下顯然太小，而在17寸上效果不錯(cuò)的頁(yè)面，到15寸下則因?yàn)樘蠖浅２槐阌跒g覽。顯然，要把主頁(yè)效果做完美，就只有把網(wǎng)頁(yè)分做兩套，一套在15寸顯示器下顯示，一套用于17寸顯示器。 

　　但關(guān)鍵是: 如何使電腦能根據(jù)自己的分辨率來(lái)自動(dòng)選擇頁(yè)面呢？ 

　　如果制作一個(gè)主頁(yè)面，分別做好“800×600”和“1024 ×768”分辨率的鏈接，要求瀏覽者根據(jù)自己顯示器的情況來(lái)選擇下面要進(jìn)入的頁(yè)面，這不就行了？但這豈不顯得自己水平太業(yè)余？ 

　　然后又想到Dreamweaver 4.0下的behavior（動(dòng)作），但查找后遺憾地發(fā)現(xiàn)，behavior下的動(dòng)作雖然比較多，但卻沒(méi)有依據(jù)分辨率而設(shè)置的動(dòng)作。 

　　經(jīng)過(guò)查閱資料和調(diào)試，終于找到了另一解決辦法。把下面這個(gè)小程序置于主頁(yè)面中，并把主頁(yè)面取名為index.htm，當(dāng)客戶(hù)機(jī)從服務(wù)器下載頁(yè)面時(shí)，首先讀取該頁(yè)面，然后根據(jù)客戶(hù)機(jī)的分辨率，下載相應(yīng)的頁(yè)面（index.htm下鏈接的兩個(gè)頁(yè)面才是真正的主頁(yè)，分別取名為“800600.htm”和“1024768.htm”）。其后鏈接的各頁(yè)面一式兩套，互不干擾（分頁(yè)面內(nèi)容基本相同，主要工作是調(diào)整顯示的位置）。由此一來(lái)，根據(jù)不同顯示器顯示不同頁(yè)面的目的終于達(dá)到了。 

　　Index.htm的源文件如下，其中還考慮到了分辨率設(shè)為 “640×480”的14寸顯示器，雖然此類(lèi)顯示器已經(jīng)不多，但還是應(yīng)該考慮到。大家在此基礎(chǔ)上可以根據(jù)自己的具體情況進(jìn)行修改。


else if ((screen.width == 800) && (screen.height == 600)) 

window.location.href= url800x600; 

else if ((screen.width == 1024) && (screen.height == 768)) 

window.location.href= url1024x768; 

else window.location.href= url640x480; 

} 

// End –>