オープンソース · MITライセンス · ピュアCSS
liquidframe
Safari を正しく描く iPhone モックアップ。
ピュア CSS の iPhone 16 Pro に、リアルな iOS 26 Liquid Glass の Safari 外殻——チタンフレーム、Dynamic Island、そして誰もモックしない部分：各レイアウトの Safari chrome。クラスを 1 つ入れ替えるだけでモードが変わります。ビルド手順なし、依存ゼロ。
動作の仕組み
- 1.
フレームをコピー
liquidframe.css を読み込み、index.html から `.phone-frame` ブロックをコピー——チタンの本体、Dynamic Island、ボタン、そして冗長な Safari chrome のマークアップがすべてそこに配線済みです。
- 2.
chrome モードを選ぶ
`.phone-frame` のクラスを 1 つ入れ替え——`chrome-compact`・`chrome-bottom`・`chrome-top`・`chrome-pwa`——で iOS 26 の各 Safari レイアウトを切り替え。JavaScript は不要で、各モードが正しい safe-area inset を設定します。
- 3.
ページを入れる
`.phone-screen` の中にウェブページを入れると、本物の iPhone とまったく同じように表示されます。`--chrome-top` / `--chrome-bot` を着色すれば、テーマ適用済みアプリや chrome 着色ライブラリのプレビューに。
機能一覧
本物の iOS 26 Safari chrome
すりガラスの Liquid Glass URL ピルと 3 種類の Safari レイアウト——他のモックアップがほぼ正しく描けないブラウザ chrome です。
4 モード、クラス 1 つ
Compact・Bottom・Top と単体 PWA。`.phone-frame` のクラスを 1 つ入れ替えるだけで切り替えでき、各モードが対応する safe-area inset を返すので、コンテンツが実機と同じようにリフローします。
ピュア CSS、依存ゼロ
チタンフレーム、Dynamic Island、突き出たボタン——すべてピュア CSS。ビルド手順なし、依存ゼロ。liquidframe.js は任意です。
テーマ変更可能・スクショ向き
chrome を着色し、画面の背景を設定し、チタンの仕上げ（Natural／Desert／Black／White）を選択。マーケティングページ、デザインレビュー、ドキュメント、ライブラリのデモに最適です。
見てみる
ライブデモを開いて chrome モードと仕上げを切り替えてみてください。あとは liquidframe.css と `.phone-frame` ブロックを自分のページにコピーするだけ——MIT ライセンス、依存ゼロ。