設(shè)備制造商為了讓自己的設(shè)備擁有更清晰的屏幕，往往選擇提高屏幕的像素，但有些時(shí)候像素的增加并不能讓用戶獲得良好的閱讀體驗(yàn)。本文以蘋果公司的移動(dòng)設(shè)備為例，為我們揭示了為什么高像素的屏幕會(huì)給用戶的閱讀帶來“煩惱”。
每周，都會(huì)出現(xiàn)具有各種屏幕尺寸、像素密度和輸入類型的新設(shè)備。作為開發(fā)人員和設(shè)計(jì)人員，我們都同意按照標(biāo)準(zhǔn)來標(biāo)記、設(shè)計(jì)以及編寫我們所創(chuàng)建的內(nèi)容。瀏覽器制造商也同意支持這些標(biāo)準(zhǔn)并為此設(shè)置適當(dāng)?shù)哪J(rèn)值，因此我們可以實(shí)現(xiàn)雙贏的結(jié)果。
開發(fā)者和瀏覽器廠商之間的協(xié)議變得比以往任何時(shí)候都更加重要。
這就是為什么當(dāng)某個(gè)設(shè)備或?yàn)g覽器廠商做出了違背協(xié)議的事情時(shí)，總是會(huì)對(duì)大家造成傷害。如果另外一方是極具影響力的公司(比如蘋果公司)，那么受到的傷害則會(huì)更大。
蘋果公司最新的平板電腦iPad Mini就陷入了這樣一種矛盾的處境：其設(shè)備寬度viewport的標(biāo)記默認(rèn)值與第一代iPad的值相同(1024×768像素)，但iPad Mini的物理屏幕尺寸卻小了40%。這就意味著網(wǎng)頁的每一個(gè)按鈕、圖形、鏈接和文本行在iPad Mini上都顯得非常小——即使我們?cè)噲D讓一切顯得正常并構(gòu)建出靈活的多設(shè)備體驗(yàn)，也無法改善這種情況。
但蘋果公司并不是惟一的罪魁禍?zhǔn)?。這是從我們開始使用視窗時(shí)就一直存在的問題，它不僅與像素有關(guān)，還與我們自己的實(shí)踐有關(guān)。讓我們回過頭來重新審視一遍造成目前困境的真正原因，并且了解一下我們需要怎樣做才能走出困境。
像素帶來的麻煩
是的，如今的視窗困境可以一直追溯到像素——那些我們每天都在使用的微小元素。像素帶來的第一個(gè)挑戰(zhàn)是數(shù)量。顯示屏上的像素越多，可以顯示的信息就越多。但由于這些像素都是物理像素，其數(shù)量無法改變，因此就有了第二個(gè)發(fā)揮作用的因素：屏幕的物理尺寸。
假設(shè)有兩臺(tái)2英寸寬的顯示屏(如圖1所示)，右側(cè)顯示屏的分辨率為640×960，左側(cè)的分辨率為320×480，那么在同樣的物理空間中，右側(cè)的屏幕可以容納的像素?cái)?shù)量將是左側(cè)屏幕的四倍，較小的像素尺寸導(dǎo)致內(nèi)容更少且屏幕更亮，給閱讀帶來了不小的障礙。
這正是Nokia E60出現(xiàn)的情況。2005年，大多數(shù)手機(jī)顯示屏的寬度都是1.25 英寸，這種寬度平均可以容納176個(gè)像素。但E60配備了一個(gè)分辨率為352×416的“龐大”顯示屏，將兩倍數(shù)量的像素?cái)D進(jìn)了類似的空間里。結(jié)果就是， 手機(jī)的屏幕看起來華麗鮮艷，卻難以閱讀。
E60 還引入了一個(gè)目前早已為人們所熟悉的問題：用戶如何在小型設(shè)備上訪問“大”網(wǎng)站。諾基亞的解決方案是通過一個(gè)新的瀏覽器——Mini Map。這個(gè)瀏覽器的工作原理類似于今天的智能手機(jī)瀏覽器：首先渲染整個(gè)頁面，然后將它縮放到適合使用的屏幕大小。疊加在這層渲染上的是一個(gè)透明的紅色方 框，通過設(shè)備的按鈕可以重新定位該方框，按下按鈕則可以放大方框內(nèi)所顯示的內(nèi)容。
進(jìn)入視窗
Mini Map可能是動(dòng)態(tài)視窗(一種構(gòu)造，旨在通過動(dòng)態(tài)改變可視屏幕區(qū)域的大小或比例，從而提高用戶體驗(yàn))的第一批商用者之一，但它還遠(yuǎn)遠(yuǎn)不是最后一個(gè)。
2007年，蘋果發(fā)布了iPhone，它的體積比E60大很多，但它也面臨類似的問題。在一個(gè)“巨大的”2英寸顯示屏上，使用iPhone訪問“真正的網(wǎng)絡(luò)”意味著要將大頁面加載到小設(shè)備上。蘋果則通過一系列精心打造的改進(jìn)來解決這一問題。
首先創(chuàng)建一個(gè)虛擬視窗，這個(gè)虛擬視窗與諾基亞為Mini Map設(shè)計(jì)的視窗類似。當(dāng)用戶瀏覽桌面網(wǎng)站時(shí)，瀏覽器會(huì)首先渲染整個(gè)頁面(默認(rèn)畫布寬度為960像素)，然后再將此頁面縮小，直至適應(yīng)2英寸的顯示屏。這 樣用戶就能夠與頁面進(jìn)行交互，并且滾動(dòng)或放大他們所選擇的區(qū)域。
蘋果并沒有就此止步，它還開發(fā)了一個(gè)新的 viewport元標(biāo)記。不使用該標(biāo)記的站點(diǎn)將使用默認(rèn)的980像素的傳統(tǒng)網(wǎng)絡(luò)視窗進(jìn)行渲染，但使用該標(biāo)記的開發(fā)人員可以為自己的站點(diǎn)聲明視窗，包括將寬 度設(shè)置為十分重要的“device-width值”(該值告訴瀏覽器“請(qǐng)為此設(shè)備屏幕選擇一個(gè)最適合的寬度”)。
很快，其他移動(dòng)瀏覽器廠商 便開始紛紛追隨蘋果公司的做法。直到如今，幾乎所有移動(dòng)瀏覽器都支持 viewport元標(biāo)記及“device-width值”。這為我們提供了一個(gè)公平競(jìng)技的機(jī)會(huì)，這個(gè)機(jī)會(huì)尊重那些為多設(shè)備網(wǎng)絡(luò)修改站點(diǎn)的適配花費(fèi)大量時(shí)間 和精力的開發(fā)人員，同時(shí)那些尚未轉(zhuǎn)型的廠商仍會(huì)獲得“良好”的默認(rèn)體驗(yàn)。
Mini的問題
移動(dòng)設(shè)備和瀏覽器廠商分配給device-width的值與該設(shè)備的物理尺寸直接相關(guān)。物理尺寸較小的設(shè)備需要較小的device-width值(這會(huì)導(dǎo)致內(nèi)容過多)。若將該值設(shè)置得過大，則大部分內(nèi)容會(huì)丟失，用戶無法舒適地去閱讀。
這就是iPad Mini的屏幕讓人不敢恭維的原因。它的“device-width值”與普通iPad相同(768像素)，但其物理尺寸卻小很多。正因如此，iPad Mini的屏幕上顯示的網(wǎng)頁尺寸與Google Nexus 7上的相比會(huì)小27%(根據(jù)設(shè)備像素的相對(duì)大小來計(jì)算)，主要原因就是因?yàn)樘O果公司決定將該設(shè)備的視窗定義為768像素。
根據(jù)內(nèi)容大小進(jìn)行解析
根據(jù)內(nèi)容大小進(jìn)行解析所導(dǎo)致的第一個(gè)問題就是文本。在較小的空間中有更多的像素，這意味著，以像素為單位定義的字體看起來會(huì)很小。
當(dāng)然，很多人不再使用像素來定義大小——我們使用相對(duì)尺寸元素(比如ems)，只是這種方法并不能很好地解決問題。
當(dāng)使用ems時(shí)，我們相信瀏覽器默認(rèn)縮放級(jí)別的基準(zhǔn)字體的大小(單位術(shù)語為1em或100%)是清晰可讀的。
但情況并非總是如此，瀏覽器的基準(zhǔn)font-size值 (1em) 大致相當(dāng)于一個(gè)16像素的正方形。該比率作為一條紐帶把絕對(duì)單位和相對(duì)單位聯(lián)系在了一起，但瀏覽器的不同可能會(huì)帶來一些差異。
在iPad Mini上，基準(zhǔn)字體的大小是16像素。當(dāng)屏幕容納較少的像素時(shí)可能沒有問題，但在視窗定義得不那么適當(dāng)?shù)母呙芏蕊@示屏上，字體可能會(huì)小到難以閱讀。
當(dāng)然，并非所有的瀏覽器都支持1:16的em像素比，例如Kindle Touch的瀏覽器有一個(gè)高密度的視窗，但通過使用1:20的比率進(jìn)行調(diào)整，將默認(rèn)字體的大小提高了幾個(gè)像素，就可以獲得更好的閱讀體驗(yàn)。這雖然沒有完全 解決iPad Mini所遇到的問題，但至少讓屏幕上顯示的內(nèi)容清晰可辨(如圖2所示)。
圖2 3臺(tái)7英寸的平板電腦上的渲染差異
為什么蘋果公司要這樣做？
要理解為什么蘋果公司會(huì)發(fā)布一款在視窗體驗(yàn)上并不完美的產(chǎn)品，我們只需分析一下自己的使用習(xí)慣就能夠得知了。
在iPad發(fā)布之后，全世界的互聯(lián)網(wǎng)從業(yè)者爭(zhēng)先恐后地調(diào)整自己的站點(diǎn)，以便能夠更好地適應(yīng)平板電腦。這一路走來，我們很多人都接受了平板化基于像素的概念，這些概念往往是專門針對(duì)像素布局為固定的1024×768的設(shè)備的 。
如果蘋果公司根據(jù)iPad Mini的物理尺寸降低其“device-width值”，無疑會(huì)導(dǎo)致第二次混亂，因?yàn)槟切└鶕?jù)平板電腦的屏幕尺寸(假設(shè)為1024×768)做出調(diào)整的網(wǎng)站，在新的設(shè)備上看起來會(huì)突然讓人無法接受。
這里的責(zé)任是雙方的。瀏覽器廠商需要提供視窗和文本大小的可靠基準(zhǔn)，而作為實(shí)施者，我們也需要停止對(duì)布局進(jìn)行像素級(jí)的控制(“控制”只是一種假象)。
前進(jìn)之路
讓我們前進(jìn)的唯一方法是通力合作。作為開發(fā)人員和設(shè)計(jì)人員，我們需要堅(jiān)持那些早已認(rèn)準(zhǔn)的目標(biāo)，并注意如何更好地完成自己的工作，這意味著完全放開像素精度的概念。我們需要贏得瀏覽器廠商的信任，讓它們?cè)谑虑槌霈F(xiàn)不好的苗頭時(shí)能聽取我們的意見。
希望這篇文章能夠清楚地說明我們正在為之努力的事情是正確的，同時(shí)也希望獲得瀏覽器廠商們的認(rèn)可及效仿。
現(xiàn)在，標(biāo)準(zhǔn)和一致性比以往任何時(shí)候都更加重要。我們要讓瀏覽器廠商和設(shè)備廠商(比如蘋果公司)清醒地認(rèn)識(shí)到：我們要對(duì)默認(rèn)視窗及其縮放達(dá)成一致的意見，我們?cè)敢鈭?jiān)持協(xié)議，并且需要這些廠商與我們攜起手來一起把這份協(xié)議履行到底。
讓我們共同努力，向著未來進(jìn)軍。
聯(lián)系客服
