在你依據少數幾個嚴格的斷點（breakpoints）來做設計決策之前，確保你已經考慮了屏幕尺寸和瀏覽器視口的巨大碎片化問題。

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

這個實驗僅持續了48小時，但我們獲得的數據相當有趣。現在，讓我們深入了解一下。

120,000個數據點代表著什么？

了解120,000這個數字在相對條件下有多大是很重要的。假設每個數據點代表一個人，以便進行比較。

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

我們所在的家鄉切爾滕納姆（Cheltenham）的人口大約是116,000人，所以我們的數據點幾乎可以填滿整個城鎮！

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

如果我們從收集到的數據點中篩選出前20個獨特的視口尺寸，主要都是較小的尺寸。你可能會推測這些都是移動設備——特別是前10個——但也值得考慮的是，視口尺寸也會因環境條件而有所不同。

即使在同一款iOS設備上，基于操作系統狀態，一個網站至少也可能出現在3種不同的環境中。

如果你以靈活、流暢的方式進行構建，這并不是問題。這一點在這個圖表中有所體現。然而，如果你傾向于使用非常特定的斷點和硬編碼的字體、尺寸和間距，即使出發點很好，你也可能發現自己并沒有提供最佳的用戶體驗。

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

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

"移動端" 與 "桌面端"

在這次實驗中，我們僅捕獲了每個數據點的寬度和高度，這些尺寸是通過 window.innerWidth 和 window.innerHeight 獲取的。我們決定將任何寬度大于800px的視口視為“桌面端”，或者我們更喜歡稱之為大視口。

你可能會覺得“800px對于桌面端來說太小了”，如果我們是在測量屏幕尺寸，你是對的。但我們這里測量的是視口尺寸。視口是瀏覽器窗口的尺寸，而不是屏幕尺寸。

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

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

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

來看看所有的視口尺寸

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

有趣的比較

來自流行框架的斷點（Breakpoints）

Figma中的斷點

這一切的要點是什么？

我們想強調的主要觀點是，你根本無法知道用戶會以何種方式訪問你的網站或網絡應用。與其基于嚴格、有限的斷點來做出設計決策，不如考慮到視口尺寸存在的大量碎片化。

我們向客戶的總是建議，成為瀏覽器的引導者，而非其微管理者。創建靈活的規則，并允許瀏覽器發揮其最擅長的一面：根據所處的條件計算出最佳的展示效果。

這一點也同樣適用于你的項目規劃。在規劃頁面內容時，問問自己對于那些不符合典型模式的奇怪視口尺寸，情況會是如何？始終嘗試簡化和壓縮內容，使其對所有人都有用。

最后，永遠記住，你不知道你的網站將在什么條件下被訪問，而且你對此幾乎沒有或根本沒有控制權。接受這種無法控制的事實，并利用這些局限性來激發創造力，同時也更加專注于你的用戶體驗（UX）工作。