在你依據(jù)少數(shù)幾個(gè)嚴(yán)格的斷點(diǎn)（breakpoints）來(lái)做設(shè)計(jì)決策之前，確保你已經(jīng)考慮了屏幕尺寸和瀏覽器視口的巨大碎片化問(wèn)題。

在Set Studio，我們進(jìn)行了一個(gè)小型的非正式實(shí)驗(yàn)，以回答“視口尺寸有多碎片化？”這個(gè)問(wèn)題。我們收集了超過(guò)120,000個(gè)數(shù)據(jù)點(diǎn)，涉及超過(guò)2,300個(gè)不同的視口尺寸。這些數(shù)據(jù)主要來(lái)自美國(guó)和歐洲的用戶，因此它們并不一定能代表全球觀眾，但對(duì)于本文而言仍然具有參考價(jià)值。

這個(gè)實(shí)驗(yàn)僅持續(xù)了48小時(shí)，但我們獲得的數(shù)據(jù)相當(dāng)有趣?，F(xiàn)在，讓我們深入了解一下。

120,000個(gè)數(shù)據(jù)點(diǎn)代表著什么？

了解120,000這個(gè)數(shù)字在相對(duì)條件下有多大是很重要的。假設(shè)每個(gè)數(shù)據(jù)點(diǎn)代表一個(gè)人，以便進(jìn)行比較。

溫布利體育場(chǎng)（Wembley Stadium）的容量是90,000人，所以我們的數(shù)據(jù)點(diǎn)可以填滿溫布利一次，還能再填滿其三分之一的可用容量。

我們所在的家鄉(xiāng)切爾滕納姆（Cheltenham）的人口大約是116,000人，所以我們的數(shù)據(jù)點(diǎn)幾乎可以填滿整個(gè)城鎮(zhèn)！

最常見的視口尺寸是什么？

如果我們從收集到的數(shù)據(jù)點(diǎn)中篩選出前20個(gè)獨(dú)特的視口尺寸，主要都是較小的尺寸。你可能會(huì)推測(cè)這些都是移動(dòng)設(shè)備——特別是前10個(gè)——但也值得考慮的是，視口尺寸也會(huì)因環(huán)境條件而有所不同。

即使在同一款iOS設(shè)備上，基于操作系統(tǒng)狀態(tài)，一個(gè)網(wǎng)站至少也可能出現(xiàn)在3種不同的環(huán)境中。

如果你以靈活、流暢的方式進(jìn)行構(gòu)建，這并不是問(wèn)題。這一點(diǎn)在這個(gè)圖表中有所體現(xiàn)。然而，如果你傾向于使用非常特定的斷點(diǎn)和硬編碼的字體、尺寸和間距，即使出發(fā)點(diǎn)很好，你也可能發(fā)現(xiàn)自己并沒(méi)有提供最佳的用戶體驗(yàn)。

以一個(gè)具有固定頁(yè)眉和/或頁(yè)腳的“像素完美”（pixel perfect）用戶界面為例。當(dāng)你縮小開發(fā)用瀏覽器的尺寸時(shí)，它可能看起來(lái)很棒，但在前面概述的條件下，它看起來(lái)如何呢？當(dāng)你從一個(gè)像智能手表這樣的小視口訪問(wèn)時(shí)，它又是如何呢？從橫屏手機(jī)訪問(wèn)時(shí)又如何呢？

基于一些寬高比和尺寸的組合，我們有信心這些情況在我們的數(shù)據(jù)中都有所體現(xiàn)。而且，人們也這樣告訴我們。

"移動(dòng)端" 與 "桌面端"

在這次實(shí)驗(yàn)中，我們僅捕獲了每個(gè)數(shù)據(jù)點(diǎn)的寬度和高度，這些尺寸是通過(guò) window.innerWidth 和 window.innerHeight 獲取的。我們決定將任何寬度大于800px的視口視為“桌面端”，或者我們更喜歡稱之為大視口。

你可能會(huì)覺(jué)得“800px對(duì)于桌面端來(lái)說(shuō)太小了”，如果我們是在測(cè)量屏幕尺寸，你是對(duì)的。但我們這里測(cè)量的是視口尺寸。視口是瀏覽器窗口的尺寸，而不是屏幕尺寸。

如果你正在桌面設(shè)備上閱讀這篇文章，有多少窗口占滿了整個(gè)屏幕？你正在閱讀的瀏覽器占據(jù)了多少屏幕空間？

最安全的假設(shè)是，桌面或筆記本設(shè)備上的用戶不會(huì)讓瀏覽器占滿整個(gè)屏幕。即使是平板用戶也不會(huì)讓瀏覽器填滿整個(gè)屏幕，因此在考慮更大視口設(shè)計(jì)時(shí)，請(qǐng)務(wù)必考慮這一點(diǎn)——尤其是如果你為小屏幕隱藏內(nèi)容，而為“桌面用戶”顯示內(nèi)容時(shí)。問(wèn)問(wèn)自己，是否真的需要為小屏幕隱藏內(nèi)容而不是為大屏幕，意味著這些內(nèi)容真的像你最初認(rèn)為的那樣必要。

還要考慮“桌面端”視口尺寸的極度碎片化。是的，如果你使用經(jīng)典的768px、1024px和1280px斷點(diǎn)，通過(guò)媒體查詢配置布局和字體大小可能是有意義的，但中間還有大量的尺寸怎么辦？

來(lái)看看所有的視口尺寸

受到2015年Open Signal關(guān)于Android屏幕碎片化報(bào)告的啟發(fā)，我們用磚石布局展示了前150個(gè)最常見的視口尺寸。你也可以看到所有2,300個(gè)不同的視口尺寸。

有趣的比較

來(lái)自流行框架的斷點(diǎn)（Breakpoints）

Figma中的斷點(diǎn)

這一切的要點(diǎn)是什么？

我們想強(qiáng)調(diào)的主要觀點(diǎn)是，你根本無(wú)法知道用戶會(huì)以何種方式訪問(wèn)你的網(wǎng)站或網(wǎng)絡(luò)應(yīng)用。與其基于嚴(yán)格、有限的斷點(diǎn)來(lái)做出設(shè)計(jì)決策，不如考慮到視口尺寸存在的大量碎片化。

我們向客戶的總是建議，成為瀏覽器的引導(dǎo)者，而非其微管理者。創(chuàng)建靈活的規(guī)則，并允許瀏覽器發(fā)揮其最擅長(zhǎng)的一面：根據(jù)所處的條件計(jì)算出最佳的展示效果。

這一點(diǎn)也同樣適用于你的項(xiàng)目規(guī)劃。在規(guī)劃頁(yè)面內(nèi)容時(shí)，問(wèn)問(wèn)自己對(duì)于那些不符合典型模式的奇怪視口尺寸，情況會(huì)是如何？始終嘗試簡(jiǎn)化和壓縮內(nèi)容，使其對(duì)所有人都有用。

最后，永遠(yuǎn)記住，你不知道你的網(wǎng)站將在什么條件下被訪問(wèn)，而且你對(duì)此幾乎沒(méi)有或根本沒(méi)有控制權(quán)。接受這種無(wú)法控制的事實(shí)，并利用這些局限性來(lái)激發(fā)創(chuàng)造力，同時(shí)也更加專注于你的用戶體驗(yàn)（UX）工作。