開源專案 · MIT 授權 · 純 CSS
liquidframe
**一個把 Safari 畫對的 iPhone mockup。**
純 CSS 的 iPhone 16 Pro，含擬真的 iOS 26 Liquid Glass Safari 外殼：鈦金屬邊框、Dynamic Island，以及別人都不做的部分，也就是每種版面下的 Safari chrome。換一個 class 就能切換模式。免建置步驟、零相依。
運作原理
1.
複製機身
引入 liquidframe.css，並從 index.html 複製 `.phone-frame` 區塊，鈦金屬機身、Dynamic Island、按鍵，以及冗長的 Safari chrome 標記都已在那裡接好。
2.
選一個 chrome 模式
在 `.phone-frame` 上換一個 class，可選 `chrome-compact`、`chrome-bottom`、`chrome-top` 或 `chrome-pwa`，即可在 iOS 26 的各種 Safari 版面間切換。不需 JavaScript；每個模式都會設定正確的 safe-area insets。
3.
把你的頁面放進去
把你的網頁放進 `.phone-screen`，它就會像在真實 iPhone 上一樣呈現。著色 `--chrome-top` / `--chrome-bot` 即可預覽換膚的 App，或展示 chrome 著色函式庫。
主要功能
真實的 iOS 26 Safari chrome
磨砂的 Liquid Glass 網址膠囊與三種 Safari 版面，這是幾乎沒有其他 mockup 畫得對的瀏覽器 chrome。
四種模式、一個 class
Compact、Bottom、Top 與獨立 PWA。只要在 `.phone-frame` 上換一個 class 即可切換，而且每種都會回報對應的 safe-area insets，讓你的內容像真機一樣重新排版。
純 CSS、零相依
鈦金屬邊框、Dynamic Island、突出的按鍵，全用純 CSS。免建置步驟、零相依；liquidframe.js 是選用的。
可換膚、適合截圖
著色 chrome、設定螢幕背景、挑選鈦金屬色（Natural／Desert／Black／White）。最適合行銷頁、設計審查、文件與函式庫 demo。
看看效果
打開 live demo 切換各種 chrome 模式與配色。然後把 liquidframe.css 與 `.phone-frame` 區塊複製進你自己的頁面，MIT 授權、零相依。