很多設計師習慣在 Mac 上畫稿，Figma 裡每個間距、每個字重都調到滿意，才放心交出去。
但網站上線後，換到 Windows 筆電用 Chrome 或 Edge 打開，畫面常常就是哪裡怪怪的。這也是 Windows 網頁設計最容易被忽略的地方。
這篇整理自優設網作者龍爪槐守望者的文章。他是一位互動設計師，把這種「水土不服」拆成三個最常見的問題：捲軸、字重、縮放倍率，並覺得根源多多少少跟 Windows 自己的設計包袱有關。
為什麼 Windows 網頁設計常常走樣
原文回顧了 Windows 的介面史，觀點很直接：它一路累積了不少設計上的妥協。
像 Windows 11，外觀換成了圓潤和半透明，但打開檔案總管或某些系統對話框，還是會看到舊式的選單和元件混在一起。
微軟近年推的 Fluent Design，宣傳影片很漂亮。但作者覺得實際到了 Edge 或 Office 裡，間距沒對齊、圖示過時的地方還是不少。
這些長期累積的設計債，最後變成一個很實際的問題：在 Mac 上做好的網頁，搬到 Windows 上就會出現各種相容問題。
第一個坑：又寬又一直都在的捲軸
Mac 的捲軸很低調。預設是隱藏的，只有捲動時才浮出一條細細的半透明灰線，停下來就消失，空間全部還給內容。
Windows 的捲軸則是一條又寬又灰的長條，不管有沒有在捲動，它都一直在那裡，直接吃掉網頁的寬度。
原文提到，這條捲軸大約有 17 像素寬。聽起來不多，但對版面來說影響很大。
如果做的是後台系統，畫面資訊密度本來就高，少了這一截寬度，可能就少放一整欄資料。
如果頁面裡有很多各自捲動的區塊，像內嵌表格、卡片列表，巢狀幾層就會冒出大大小小的捲軸，作者叫它「捲軸地獄」。
它帶來的問題大概有三種：
- 版面錯位：在 Mac 上設定 1200px 寬的內容區，到了 Windows 可能被捲軸擠到換行或跑版
- 視覺被破壞：原本乾淨的極簡介面，被粗重的捲軸打亂整體感
- 響應式設計更難算：斷點要多考慮捲軸佔掉的寬度
好在這個問題比較好處理。現在的瀏覽器都能用 CSS 自訂捲軸樣式，也可以自己寫元件，做成像 Mac 那樣不捲動就隱藏。多寫一點程式，但至少解得掉。
第二個坑：字重不是太細，就是太粗
在 Mac 上用蘋方畫稿，細體、常規、中粗、粗體都能用，標題和內文的層次很容易拉開。
但 Windows 最常見的中文字型是微軟雅黑，字重基本上只有常規和粗體兩種。
結果就是，你在設計稿裡細心調好的中粗體，到 Windows 上要嘛跟常規體幾乎沒差別，要嘛直接變成最粗的那一級，一整片黑壓壓的，好像在對使用者大吼。
原文說，背後的原因是兩套系統顯示字型的想法不一樣。
macOS 的 Core Text 想盡量忠於字型設計師的原貌，寧可邊緣柔一點，也要保留字形的曲線和粗細。它在意的是還原。
Windows 的 DirectWrite 和 ClearType 則會把字形對齊螢幕的像素格線，尤其在解析度不高的螢幕上，優先讓文字銳利好讀。它在意的是清楚。
最直接的做法是用網頁字型（Webfont），讓瀏覽器下載指定的字型檔來顯示，不管在哪個平台都能還原設計稿。
代價也很明顯。字型檔會拉長網頁載入時間，很多好的字型還要付費，商用授權不便宜。要不要用，得看專案的重要程度和預算。
第三個坑：螢幕越新，看到的內容越少
這要先從蘋果的 Retina 說起。高解析度的螢幕如果照傳統方式顯示，12px 的字會小到很難讀。
所以 macOS 把介面元素的長寬各放大兩倍，原本 1 個像素改用 4 個實體像素來畫，大小看起來正常，邊緣也更細緻。
Windows 也想這樣做，但情況複雜很多。電腦是各家廠商自己做的，螢幕解析度五花八門。
原文提到，現在主流的 Windows 辦公筆電解析度是 1920×1080，系統卻會預設推薦 150% 的縮放，實際能顯示的內容只剩相當於 1280×720。
設計師為了照顧大多數使用者，常用 1440×900 的尺寸來設計網頁。結果一台全新的筆電，預設狀態下連這個標準寬度都放不下，原本不該出現捲軸的地方也冒出捲軸了。
解法有，但都有點彆扭。前端可以用 CSS 或 JS 做整頁縮放，但常常出問題，像彈出視窗位置跑掉，或是跟引入的第三方外掛互相衝突。
作者分享過一個很土法煉鋼的做法。他負責的內部專案使用者不多，乾脆一個一個走到同事座位上，手動把瀏覽器縮放調成 80%。
如果是公開上線的網站，他會在頁面加一個判斷，偵測到可用寬度不到 1440，就跳出小提示，建議使用者按住 Ctrl 再滾動滑鼠滾輪來縮小頁面。他自己也覺得不太優雅。
原文還舉了網易 Filmly 網站的例子，偵測到使用者改了縮放，就用紅色橫幅提醒怎麼調回最佳狀態。
其他零碎問題，和背後的原因
除了這三個大坑，還有一些零碎的狀況。像不同瀏覽器的色彩管理不一樣造成色差，或是只在 Windows 特定瀏覽器才會出現的 CSS 渲染錯誤。
作者覺得，說到底還是微軟在設計上不太拘小節。Windows 11 裡有的右鍵選單是新的圓潤毛玻璃，有的又是舊的方正選單，這種不一致散落在系統各處，自然也很難給設計師一個穩定的基礎環境。
上線前，找一台真的 Windows 電腦
原文最後的提醒很實際：不要以為網頁在 Mac 上看起來完美，就沒事了。Windows 使用者佔了大半市場，不能因為它不好看就不管。
找一台真的 Windows 電腦，打開你的網頁，捲一捲、縮放看看。作者說一定會發現一些意想不到的「驚喜」。
讀完這篇，我想最有感的是那條 17 像素的捲軸。很小的東西，卻能讓一整個版面跑掉。
Windows 網頁設計也許不是最有成就感的部分，但早點面對，總比上線後被使用者抱怨好。這一關，終究是繞不過去的。
如果你常做資訊密度高的後台畫面，也可以接著看這篇：儀表板設計怎麼做？畫圖之前先問的三個問題。
Windows 網頁設計的常見問題
為什麼網頁在 Windows 上會跑版？
最常見的原因是捲軸會佔掉約 17 像素寬，加上系統預設 150% 縮放，可顯示的範圍變小，原本放得下的內容就被擠到換行。
Windows 上的中文字重為什麼不一樣？
Windows 常用的微軟雅黑大多只有常規和粗體，中粗體會被併到其中一邊。想完整還原可以用網頁字型，但要評估載入速度和授權費用。
