iPhone セーフエリア一覧・CSS対応シミュレーター

iPhoneの縦向き・横向きのセーフエリアと画面サイズを確認。固定ボタンの重なりを比較し、CSS・Tailwindコードをコピーできます。

ブラウザー内で動作 · 登録不要

機種

画面の向き

領域を表示

模式図です。カメラ部分や角丸は正確な外形ではありません。

参考インセット pt

上: 0
右: 84
下: 34
左: 0

論理画面サイズ: 466 × 678 pt
安全領域のサイズ: 382 × 644 pt
物理解像度: 1398 × 2034 px
描画倍率: 3×

数値について

データ更新日 2026-09-26

コンテンツの余白16 px

iPhone Duo の論理サイズと余白は iOS 27.1 シミュレーターの参考値で、横向きは左回転です。内側画面はステータスバーを表示し、濃い領域はシステム予約領域を表します。内側の論理サイズ 669 × 951 pt と公式の物理解像度 1878 × 2670 px は別の値で、単純に3倍換算できません。完全に開いた状態と閉じた状態を示し、実機の測定値ではありません。

可変レイアウトのコード

機種ごとの数値を固定せず、実際の env() を使用します。余白の変更はコードに反映され、デモのスイッチは比較専用です。固定バーと高さ44pxのボタンの場所を確保しています。高いコンテンツやSafari・PWAでの動作は実機で確認してください。

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

<style>
  .safe-page {
    box-sizing: border-box;
    min-height: 100dvh;
    padding: 16px;
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
    padding-right: calc(16px + env(safe-area-inset-right, 0px));
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    padding-left: calc(16px + env(safe-area-inset-left, 0px));
  }
  .safe-bottom-bar {
    position: fixed;
    inset: auto 0 0;
    box-sizing: border-box;
    padding: 16px;
    padding-right: calc(16px + env(safe-area-inset-right, 0px));
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    padding-left: calc(16px + env(safe-area-inset-left, 0px));
    background: #fff;
    color: #171717;
  }
  .safe-bottom-bar button { min-height: 44px; width: 100%; }
</style>

<main class="safe-page"><!-- Page content --></main>
<footer class="safe-bottom-bar"><button>Continue</button></footer>

このブラウザーのセーフエリア

ブラウザーの値を取得中…

このブラウザーのCSS px実測値で、機種プリセットとは独立しています。PCや長方形のビューポートでは0が正常な場合があります。回転やサイズ変更で値は変化します。端末の識別やSafariのエミュレーションは行いません。

iPhone セーフエリア早見表

標準表示倍率でステータスバーを表示した縦向きの論理ポイント（pt）です。安全領域の幅と高さは、画面の論理サイズから両側の余白を引いて求めます。実機での確認も必要です。

iPhone セーフエリア早見表 — 縦向き
機種	論理画面サイズ	上 (pt)	下 (pt)	右 (pt)	安全領域のサイズ
iPhone Duo · 外側画面 · 閉じた状態	466 × 678	0	34	84	382 × 644
iPhone Duo · 内側画面 · 開いた状態	669 × 951	82	34	0	669 × 835
iPhone 16 Pro	402 × 874	62	34	0	402 × 778
iPhone 16 Pro Max	440 × 956	62	34	0	440 × 860
iPhone 14 Pro	393 × 852	59	34	0	393 × 759
iPhone 13 mini	375 × 812	50	34	0	375 × 728
iPhone 12	390 × 844	47	34	0	390 × 763
iPhone 11	414 × 896	48	34	0	414 × 814
iPhone X	375 × 812	44	34	0	375 × 734
iPhone SE (3rd gen)	375 × 667	20	0	0	375 × 647

使い方

機種と画面の向きを選び、参考寸法とインセットを確認します。
レイアウトデモで適用を切り替え、余白とボタンの位置を比較します。
CSSまたはTailwindコードをコピーし、対象のブラウザーと端末で確認します。

変換例

padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));

仕様と制限

CSS px、ネイティブのpt、物理ピクセルは異なります。iPhone 13 miniは3倍で描画した後、物理解像度に縮小します。

OS、表示倍率、ブラウザーのバー、アプリの構成で値が変わります。開孔の模式図を正確なデザイン素材として使用しないでください。

FAQ

ブラウザーの値が0pxなのはなぜですか？

長方形のビューポートには避ける領域がない場合があります。iPhoneを選んでもPCブラウザーは通常0を返します。プリセットの選択は実行環境を変更しません。

下の余白を34pxに固定できますか？

env(safe-area-inset-bottom, 0px)に必要な余白を加えてください。固定値では横向きや他の機種、ブラウザーの状態に対応できません。

ツールページの更新日： 2026-09-26