**設計時,有乙個最常用的指導性原則:頁面長度原則上不超過3屏,寬度不超過1屏。這個原則明顯是從使用者的體驗出發,特別是寬度不超過一屏,其最基本的表現是瀏覽器不出現橫向滾動條,這幾乎是目前的設計準則。那麼這裡的一屏到底是多大呢?
普通使用者通常瀏覽網頁時,其瀏覽網頁的有效面積會受到下面幾個方面的影響:
顯示器的解析度
這個由科技發展和使用者購買力及喜好決定,其資料取決於統計。
作業系統
毫無疑問目前是windows的天下,其中windowsxp佔絕大多數。
網頁瀏覽器
ie依舊份額最高,但是firefox、opera和safari等也有一定市場。
個人定製
主要是使用者定製作業系統的樣式、作業系統工作列是否隱藏和瀏覽器的樣式,但是總體上這部分應該屬於高階使用者,絕大部分使用者依舊會使用作業系統和瀏覽器的預設樣式。
下面是關於瀏覽器和螢幕解析度的統計資料:
w3counter於2006.11.12發布的全球統計資料
某知名站點2023年10月份的資料
由上面的資料可以得出:
基本上使用者解析度都在800×600以上,絕大部分都在1024×768以上,從全球情況來看,800×600的解析度會越來越少。
國內瀏覽器依舊是ie6的天下,這將會持續較長的時間。從全球市場來看,國內的firefox2.0和ie7會逐步增長,特別當ie7的中文版推出和windows自動更新的推廣開始以及隨vista上市,ie7增長會更快。
所以計算一屏大小應基於以下原則:
一屏指絕大部分使用者的瀏覽器顯示網頁的有效可視區域。
一屏的計算環境是windows xp和瀏覽器均處於預設樣式。
由於ie無論是否超過一屏都存在縱向滾動條的位置,firefox和opera是在頁面超過一屏的時候出現縱向滾動條,且瀏覽絕大部分網頁都有縱向滾動條的存在,所以一屏大小的計算都基於瀏覽器有縱向滾動條的狀態下。
由於firefox2.0在只瀏覽乙個網頁時不出現多視窗的控制欄,而其它的多視窗瀏覽器都出現多視窗控制欄且使用時都會同時瀏覽多個網頁,所以一屏大小在firefox中指多視窗的控制欄存在時。
下面是基於上面的原則得到常用瀏覽器和解析度下的的資料結果:
有效可視區域(單位:px)
螢幕 一 二 三
800 600 1024 768 1280 1024
ie6.0 779(+21) 432(+168) 1003(+21) 600(+168) 1259(+21) 856(+168)
ie7.0 779(+21) 452(+148) 1003(+21) 620(+148) 1259(+21) 876(+148)
firefox2.0 783(+17) 417(+183) 1007(+17) 585(+183) 1263(+17) 841(+183)
opera9.0 781(+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
網頁一屏有多大?
隨網之舞 設計時,有乙個最常用的指導性原則 頁面長度原則上不超過3屏,寬度不超過1屏。這個原則明顯是從使用者的體驗出發,特別是寬度不超過一屏,其最基本的表現是瀏覽器不出現橫向滾動條,這幾乎是目前的設計準則。那麼這裡的一屏到底是多大呢?普通使用者通常瀏覽網頁時,其瀏覽網頁的有效面積會受到下面幾個方面的...
CSS實現Footer固定底部,超過一屏自動撐開
方法一 給html body都設定100 的高度,確定body下內容設定min height有效,然後設定主體部分min height為100 此時若沒有header footer則剛好完美佔滿全屏 參考 div絕對居中 寬高自適應 多欄寬度自適應 但是有了這兩個,只能另尋他路,由於高版本瀏覽器對b...
一次滾動一屏的滾動條行為實現
在一些類似於幻燈片之類的頁面上,滾動條被限制為了每次滾動乙個螢幕,也就是滾動幻燈片的一頁。但瀏覽器並沒有直接提供這樣的功能,我們通常是通過程式控制來實現的。這樣的程式並不困難,只要劫持滑鼠滾輪事件,將其修改到自己需要的行為即可。下面是乙個簡單地實現 這裡沒有考慮低版本瀏覽器的相容,如果需要可以使用j...