關于網頁對客戶端分辨率自適應策略的研究

[摘要] 從網頁信息傳播角度提出網頁對客戶端分辨率的適應問題，將解決方法歸納為調整和選擇策略;闡述了兩種實現策略的原理與具體實現方法。

[關鍵詞] 自適應分辨率調整選擇

一、前言

網頁是現代信息傳播的媒介，網頁在客戶端的顯示效果直接關系到信息傳播的有效性。那么如何讓自己的網頁自動適應瀏覽者的顯示分辯率呢？解決方法是多種多樣的，但歸結起來不外乎兩種策略：第一種就是調整策略即調整網頁要素以適應分辨率的變化。第二種就是選擇策略即根據分辨率的不同選擇不同規格的網頁或網頁樣式。下面我分別闡述其實現原理和操作。

二、網頁調整策略及其實現

網頁調整策略就是根據網頁的信息傳達的需求，調整影響網頁要素屬性設置以期達到與瀏覽器顯示分辨率自動匹配的策略。表格是目前網頁制作大量使用的手段之一，也是影響網頁信息傳達的主要因素；當分辨率調整時，窗口尺寸發生變化，導致表格被壓縮或拉伸，顯示位置發生變化，從而影響了網頁的整體顯示效果。究其成因可能有兩種：一種原因將表格尺寸設置為固定值，當窗口尺寸變小時，表格被壓縮；或者表格尺寸設為百分比形式，當拉伸時表格被拉大，同樣影響網頁的正確顯示。二是表格對齊方式的設置，表格的默認對齊方式設置為居左，這樣分辨率設置變化發生變化時，比如提高分辨率，窗口尺寸變大，表格右側就會出現大量空白，從而也會影響網頁的顯示效果。

對于上面提到的兩種情況，我們可以采用簡單的表格嵌套的辦法加以解決，即內層表格以較小的固定尺寸居中顯示，確保傳遞效果的實現，外層表格則作為背景按百分比居中顯示。既保證了所傳遞信息的有效性，同時又能自動保證網頁有一個良好的外觀。

上述處理只是簡單的實現了表格網頁對顯示分辨率的自動適應，其應用還存在很大局限性，比如內層表格主要用來傳遞信息，其尺寸是以假想瀏覽者的最小分辨率為設計前提；當瀏覽者的分辨率提高，內層用于傳遞信息的表格并不會變大，信息傳播的效果也就必然會受到影響。

三、網頁選擇策略及其實現

網頁的選擇策略就是根據網頁的信息傳達的需求，對網頁或網頁構成格式進行選擇以期與傳播對象顯示分辨率自動適應的策略。根據解決策略在實現方法的不同，我們可將其歸納為兩種：

1.調用適合不同分辨率的網頁

這種做法是我們所期待的，也是算法上容易實現的一種。我們可以事先制作出展示信息內容相同但適合不同分辨率設置的網頁，然后，檢測瀏覽者顯示分辨率的設置，調用相應的網頁，從而保證信息傳播的有效性。這種調用適合不同分辨率網頁的方法的關鍵就在于如何測試瀏覽者的顯示分辨率。通過javascript腳本的編寫可以輕松實現該操作。

首先準備2個可供在800*600像素和1024*768像素下調用的頁面htm1.htm和htm2.htm，分別為在頭文件中加入Javascript代碼，利用腳本查驗瀏覽者的顯示器分辯率；然后根據常用的分辨率設置設定調用條件，調用相應規格網頁。腳本應用實例如下：

在上述情形中，網頁載入時首先要進行分辯率的檢測；如果檢測到符合if條件所設定顯示器寬度值如常用的分辨率設置有1024*768和800*600，就會從服務器調用相應的網頁。但是，這種設置基本上解決了常用顯示分辨率設置條件下網頁的正確顯示問題，但仍然存在不完善的地方，比如非常規的顯示分辨率設置，顯示仍然有可能出現問題。為此，我們可對上述代碼進行改進，使之適合分辨率的變化，程序改進代碼如下：

上述改進中，MultiHref（）函數的參量設置了4種，調用時可以分別調用4種不同的網頁，考慮到網頁制作的工作量問題，上述改進中只設置了兩個網頁htm1和htm2供程序調用。

2.調用適合不同分辨率的css（樣式表文件）

CSS(Cascading Style Sheet) 即層疊樣式表 ，它是一系列格式規則，主要用來控制網頁內容的外觀。使用 CSS 樣式可以非常靈活并可以精確地控制網頁外觀，例如css可以精確確定網頁布局、字體和表格樣式等。Css的這些特點使其在網頁制作中被廣泛的應用。在網頁中加入樣式表的方法有內部嵌入方式或外部鏈接方式。其中外部鏈接方式就是讓網頁調用獨立的css文件用以控制網頁顯示的外觀，這種方式為實現網頁對分辨率的自動適應提供了可能性。在設計網頁時，事先建立一組適合不同分辨率的css文件，然后根據css文件建立網頁布局；在頁面加載過程中取得屏幕分辨率，重新設定頁面元素應該應用的css文件。選用不同的鏈接樣式的方法也可用javascript腳本來實現，其代碼可如下：

在使用時，將上述代碼嵌入到與之間即可實現適合不同分辨率的css調用。

四、結束語

上述兩種策略在實現上各有千秋。前者比較適合流行的顯示器設置，但操作相對簡單且不需要對分辨率進行檢測，因而網頁載入延時較小；后者適用范圍較廣，但需要準備多個可供調用的網頁文件，因而網頁制作工作量加大，同時該操作需要偵測終端顯示器的分辨率，網頁顯示上存在一定的延時，但卻可準確表達網頁信息。兩種策略雖有不同，但卻有著共同的特點，其一是都能夠自動適應瀏覽者的顯示器分辨率設置，從而都可保證網頁信息的有效傳播；其二是都不需要動態網站的支持，從而具有廣泛的應用性。

本文中所涉及到的圖表、注解、公式等內容請以PDF格式閱讀原文。