Design system · Device

手機外框

所有 prototype 共用的裝置外殼，資產本體是 device-frame.css——本頁直接載入那個檔來渲染，不是第二份真相。規格是 393 × 852，狀態列固定保留。內容一律放進 .device-viewport，那是唯一的縱向 scroller。下面的縮放只影響這頁的展示，資產尺寸不變——所以永遠是等比例縮，不會壓扁長寬比。

顯示比例

顯示安全區狀態列與動態島佔住螢幕頂端 44px，內容不能滑到底下。

校準螢幕，開啟「實際大小」未校準

為什麼需要這一步：螢幕上的 100% 是 CSS 像素的 100%，不是實際尺寸——同樣 393px 在不同螢幕上的物理大小差很多，所以光看框無從得知它跟真機一不一樣大。用一張卡片當外部基準校準之後，就能顯示真正 1:1 的物理尺寸。

拿一張信用卡、悠遊卡或健保卡（都是同一個 ID-1 規格）貼在螢幕上，拖動滑桿讓虛線框和卡片一樣寬。

85.60 × 53.98 mm
把實體卡片對齊這個框

9:41

↑ 內容禁區 44px

空外框資產本體。狀態列是裝置外殼的一部分，不得移除、不得拿來放產品資訊。

9:41

↑ 內容禁區 44px

放了內容的樣子

內容從狀態列底下開始，不會被動態島蓋到。這一區可以自己捲，外層不捲。

裝了示範內容灰條只屬於這張規格頁，不是外框的一部分。試著在框內往下捲。

9:41

↑ 內容禁區 44px

深色

在 .device 上加 data-device-theme="dark"。只換外殼描邊、螢幕底色與狀態列前景，尺寸與圓角完全不變。

深色變體不論這一頁本身是淺色還是深色，這個樣本永遠是深色——它是變體的樣本，不跟著頁面主題走。

規格

項目	值	怎麼定的
尺寸	393 × 852	iPhone 15／14 Pro 邏輯像素。過去三套實作各用 390×844、393×844、393×852，取較新者統一。`tokens.css` 的 `--shell-width/--shell-height` 已對齊同一組值。
hook	[data-phone-frame]	mini-kit 的 machine gate 與 l2-shell 都已經在用這個名字。
圓角	48px	外框圓角；螢幕圓角自動算成 48 − 8 = 40px。
邊框厚度	8px	外殼與螢幕之間的黑邊。
狀態列	44px	三套實作的唯一共識。固定保留。
動態島	118 × 28	置中，距頂 10px。保留的理由是它是真實的版面約束，不是裝飾。
窄視窗	≤ 440px	圓角降到 28px、去陰影、吃滿高度，但仍看得出是手機。

使用規則

狀態列固定保留。它是裝置外殼，不是內容區。不得移除，也不得拿來塞產品資訊。
內容一律放進 .device-viewport。那是唯一的縱向 scroller，不要自己在外面再包一層。
不 import 任何 token 檔。這個資產刻意自足，所有值都在 --device-* 命名空間裡，所以不同 token 體系的 prototype 都能直接用。
深色用 data-device-theme="dark"。只換配色，尺寸與圓角不動。

為什麼要有這個檔。「prototype 要畫成手機的樣子」本來只是一條寫在文件裡的散文慣例，沒有可以引用的實體，結果被各自重畫了三次，尺寸還互相打架。device-frame.css 就是那條慣例的唯一實體——以後不是「請照這樣做」，是「引用這個檔」。