當(dāng)前的前端設(shè)計(jì)師有一個(gè)苦惱，就是用戶(hù)屏幕顯示分辨率的各不相同，并不能只按照一個(gè)模式設(shè)置網(wǎng)站的寬度，特別對(duì)于寬屏用戶(hù)來(lái)說(shuō)更為煩惱。

　　根據(jù)我的博客上月統(tǒng)計(jì)，1024×768分辨率的用戶(hù)只占到50%，并且在逐月下降，而1280-1440這三個(gè)分辨率的用戶(hù)則達(dá)到了35%，如果按照這個(gè)速度發(fā)展下去，明年就會(huì)超過(guò)1024分辨率，這說(shuō)明，使用17寸普屏的用戶(hù)正在加速減少，而17、19寸寬屏用戶(hù)正在穩(wěn)步逐步增加，這給前端設(shè)計(jì)師的一個(gè)考驗(yàn)是，不能只考慮1024×768分辨率的用戶(hù)了，要想想大屏幕寬屏用戶(hù)的瀏覽體驗(yàn)了。

　　Google Reader是一個(gè)典型的內(nèi)容閱讀性質(zhì)的網(wǎng)站，用戶(hù)在上面閱讀時(shí)間非常之長(zhǎng)，那么，Google的前端設(shè)計(jì)師是怎么考慮這個(gè)問(wèn)題的呢？

　　大家可以做一個(gè)實(shí)驗(yàn)，在19寸寬屏下，如果網(wǎng)站頁(yè)面全文顯示，鋪滿(mǎn)整屏，那么閱讀的時(shí)候，眼睛需要從左轉(zhuǎn)到右，才能閱讀完一行，屏幕越大，這種效果越明顯，因此，一個(gè)讓用戶(hù)大量閱讀的網(wǎng)站，為了照顧好讀者的眼睛，在大屏幕寬屏下，也不應(yīng)該全屏鋪開(kāi)的顯示文字內(nèi)容。

　　在1024×768分辨率下，使用Google Reader時(shí)，會(huì)發(fā)現(xiàn)內(nèi)容是全屏顯示的，但是，使用19寸寬屏在1440×900分辨率下打開(kāi)Google Reader，會(huì)發(fā)現(xiàn)這時(shí)并沒(méi)有寬屏顯示內(nèi)容，右邊留出了一大塊空白，如下圖顯示。

　　使用工具測(cè)量寬屏下Google Reader的內(nèi)容顯示像素，結(jié)果是955個(gè)像素，很有趣的數(shù)字。

　　我在《更改博客頁(yè)面寬度到960像素》一文中已經(jīng)提到了，現(xiàn)在的網(wǎng)頁(yè)設(shè)計(jì)的行業(yè)標(biāo)準(zhǔn)應(yīng)該就是950/960像素寬度，這個(gè)寬度應(yīng)該是人眼在不轉(zhuǎn)動(dòng)的情況下能看到的極限了，實(shí)際閱讀區(qū)域正文的寬度是650像素，Google Reader的這個(gè)設(shè)計(jì)很有意思。

　　在Google搜索引擎中，搜索結(jié)果的顯示寬度確是另外一個(gè)數(shù)字580像素，這是又一種內(nèi)容寬度設(shè)計(jì)，Google這么做的原因估計(jì)是為了更好的顯示右側(cè)廣告。

　　我的博客最初使用的是778像素這個(gè)寬度，在2008年的那次改版后，修改為878像素寬度，主要是為了修改方便，直接加了100像素，正文區(qū)域的閱讀寬度是668像素，左側(cè)側(cè)欄寬度是200像素。不過(guò)，今年的改變，我的博客的整體寬度修改為960，正文區(qū)域的寬度是728像素，728的寬度僅僅為了好放Google AdSense而已。

　　原創(chuàng)文章如轉(zhuǎn)載，請(qǐng)注明：轉(zhuǎn)載自月光博客 [ http://www.williamlong.info/ ]
　　本文鏈接地址：http://www.williamlong.info/archives/1757.html