philxyz0316

網站設計時，有一個最常用的指導性原則：頁面長度原則上不超過3屏，寬度不超過1屏。這個原則明顯是從用戶的體驗出發，特別是寬度不超過一屏，其最基本的表現是瀏覽器不出現橫向滾動條，這幾乎是目前的設計準則。那麼這裡的一屏到底是多大呢？
普通用戶通常瀏覽網頁時，其瀏覽網頁的有效面積會受到下面幾個方面的影響：

• 顯示器的分辨率
  這個由科技發展和用戶購買力及喜好決定，其數據取決於統計。
• 操作系統
  毫無疑問目前是Windows的天下，其中WindowsXP佔絕大多數。
• 網頁瀏覽器
  IE依舊份額最高，但是Firefox、Opera和Safari等也有一定市場。
• 個人定制
  主要是用戶定制操作系統的樣式、操作系統任務欄是否隱藏和瀏覽器的樣式，但是總體上這部分應該屬於高級用戶，絕大部分用戶依舊會使用操作系統和瀏覽器的默認樣式。

下面是關於瀏覽器和屏幕分辨率的統計數據：

W3Counter於2006.11.12發佈的全球統計數據

某知名站點2006年10月份的數據

由上面的數據可以得出：

• 基本上用戶分辨率都在800×600以上，絕大部分都在1024×768以上，從全球情況來看，800×600的分辨率會越來越少。
• 國內瀏覽器依舊是IE6的天下，這將會持續較長的時間。從全球市場來看，國內的Firefox2.0和IE7會逐步增長，特別當IE7的中文版推出和Windows自動更新的推廣開始以及隨Vista上市，IE7增長會更快。

所以計算一屏大小應基於以下原則：

• 一屏指絕大部分用戶的瀏覽器顯示網頁的有效可視區域。
• 一屏的計算環境是Windows XP和瀏覽器均處於默認樣式。
• 由於IE無論是否超過一屏都存在縱向滾動條的位置，Firefox和Opera是在頁面超過一屏的時候出現縱向滾動條，且瀏覽絕大部分網頁都有縱向滾動條的存在，所以一屏大小的計算都基於瀏覽器有縱向滾動條的狀態下。
• 由於Firefox2.0在只瀏覽一個網頁時不出現多窗口的控制欄，而其它的多窗口瀏覽器都出現多窗口控制欄且使用時都會同時瀏覽多個網頁，所以一屏大小在Firefox中指多窗口的控制欄存在時。

下面是基於上面的原則得到常用瀏覽器和分辨率下的的數據結果：

有效可視區域（單位：px）屏幕一二三800600102476812801024IE6.0779(+21) 432(+168) 1003(+21) 600(+168) 1259(+21) 856(+168) IE7.0779(+21) 452(+148) 1003(+21) 620(+148) 1259(+21) 876(+148) Firefox2.0783(+17) 417(+183) 1007(+17) 585(+183) 1263(+17) 841(+183) Opera9.0781(+19) 461(+139) 1005(+19) 629(+139) 1261(+19) 885(+139)

關於上面數據的解釋和一些其他事實：

• 在800×600分辨率和Windows XP下定制Windows的經典樣式IE6的有效可視區域是780×445，Windows98、Windows 2000和Windows2003均採用經典樣式切IE5.0、IE5.5、IE6.0的佈局上相似，所以相同分辨率下應該比Windows XP默認的樣式要大。
• 知道瀏覽器型號和屏幕的分辨率能夠很容易的推算出可視區域面積，比如1024×768下IE7.0的可視面積是（1024-21）×（1024-148）

綜合上面所有的數據，結論如下：

• 最保守而最有兼容性的一屏大小是：779×432
• 最廣泛的一屏大小是：1003×600
• 適合目前國內的情況，一屏大小是779×600

watermoon

感謝你的說明，做網頁的常要為這個瀏覽器的可視範圍傷腦筋，因為現在的使用者大多使用液晶螢幕了，所以目前許多網站也開始以1024x768為主的樣子…

yoyy159632

我暈了萬事真的起頭難
謝謝你的提供嚕

rexon86

謝謝詳細說明.....

nwfhxhu

引用:

原帖由 watermoon 於 2007-8-14 15:42 發表 訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。
因為現在的使用者大多使用液晶螢幕了，所以目前許多網站也開始以1024x768為主的樣子…
...

沒錯，我也認同這個部分
我們學校老師也是這樣指示我們做網頁的報告
請有興趣做網頁的大大，要記得這個部分唷！！