瀏覽器縮放與顯示誤差

如果你像我一樣使用 4k 螢幕那麼應該很常會使用到瀏覽器的縮放功能，因為在同尺寸的螢幕塞入更多像素後一切介面都會變得更渺小細緻，這也導致我留意到一個獨特的問題：瀏覽器縮放造成 1px 顯示誤差。

舉例在 Shadcn UI 或是 Google Search Console 都有偶然觀察到這樣的問題。關係到瀏覽器如何處理縮放後不滿整數的像素的情況，由於螢幕的最小顯示單位是 1px，因此在最終顯示時就會與預期相比出現差異。

偏向各家瀏覽器應該如何應對像素縮放這個無解的問題🔗，因此其實也沒什麼前端能嘗試的。聽說舊版本 Chrome 容易將 1px 線條在縮放後變成不顯示，有一些變通方法🔗可以參考看看。