讓網頁適應不同尺寸的顯示器

   17寸顯示器在今年已是無可爭議的主流配置，而15寸彩顯獨領風騷的時間不過才兩年，這一問題給網頁制作帶來的問題是: 15寸彩顯與17寸彩顯除了本身在物理顯示面積上的差距外，15寸顯示器還往往采用800×600分辨率，而 17寸顯示器則基本采用1024×768分辨率，這就造成兩類顯示器在顯示面積上有很大的差異。在15寸顯示器上顯示正常的頁面到17寸下顯然太小，而在17寸上效果不錯的頁面，到15寸下則因為太大而非常不便于瀏覽。顯然，要把主頁效果做完美，就只有把網頁分做兩套，一套在15寸顯示器下顯示，一套用于17寸顯示器。 

　　但關鍵是: 如何使電腦能根據自己的分辨率來自動選擇頁面呢？ 

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

　　然后又想到Dreamweaver 4.0下的behavior（動作），但查找后遺憾地發現，behavior下的動作雖然比較多，但卻沒有依據分辨率而設置的動作。 

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

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


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 -->