URL を入れても画面が真っ白です。どうすれば表示できますか？

そのサイトが X-Frame-Options か Content-Security-Policy の frame-ancestors で他サイトからの埋め込みを拒否しています。自分のサイトなら応答ヘッダーを frame-ancestors 'self' https://www.mach-tools.net; に変え、X-Frame-Options を外すと表示できます。他社のサイトは Chrome DevTools のカスタム端末で同じ寸法を登録して確認してください。

実機とまったく同じ見え方になりますか？

ビューポートの幅と高さは実機の値ですが、描画するのはお使いのブラウザです。フォント描画、デバイスピクセル比、Safari のアドレスバーの高さ、タッチ操作は再現していません。レイアウト崩れの確認には十分ですが、最終確認は実機か Xcode の Simulator で行ってください。

折りたたみに合わせてレイアウトを変える CSS はありますか？

Web 標準としては Viewport Segments API と Device Posture API がありますが、2026年9月時点で対応しているのは Chromium 系だけで、iOS の Safari では使えません。iPhone Duo 向けには、幅 890px 前後で中央付近に重要な操作を置かない、内画面では2カラムにして中央に境界を置く、といったビューポート幅ベースの設計が現実的です。

入力した URL は送信されますか？

当サイトのサーバーへは送信しません。URL はお使いのブラウザが iframe として直接読み込むだけです。読み込み先のサイトには通常のアクセスと同じようにリクエストが届きます。入力内容はページを離れると消え、履歴も保存しません。

iPhone Duo シミュレーター｜折りたたみiPhoneでWebサイトを表示確認

Q: localhost の開発中サイトは表示できますか？

できます。http://localhost:3000/ のように開発サーバーの URL をそのまま入れてください。ブラウザは localhost と 127.0.0.1 を安全な接続として扱うので、https のこのページからでも埋め込めます。それ以外の http のサイトは混在コンテンツの制限で表示できません。

Q: ノートPC型では、なぜ下半分にページが出ないのですか？

Apple はノートPC型の姿勢を、下の画面に専用の操作パネルを出し、上の画面で動画やビデオ通話を見る使い方として説明しています。それに合わせて上半分（626×445）だけにページを映し、下半分は暗い操作パネルとして描いています。Safari がこの姿勢で実際にどう描くかは2026年9月時点で公表されていません。折り目をまたいで全面に描かれた場合は「開いて縦」（626×890）で確認できます。

Q: 枠の中のリンクを押しても、何も起きません。

URL 欄の下の「新しいタブを開かせない」スイッチが入っていると、target="_blank" や window.open のリンクは止められます。他サイトのページの中身にはブラウザの決まりで触れられないため、そのリンクを枠の中で開くことはできず、押しても何も起きません。リンク先まで確認したいときはスイッチを切ってください。マッハーツール自身のページだけは、スイッチが入っていても枠の中で開きます。

phone_iphoneiPhone Duo シミュレーター
折りたたみ iPhone で Web サイトを表示確認

URL を入れるだけで、iPhone Duo の内画面（890×626）と外画面（466×678）にあなたのサイトを映します。姿勢は5種類。localhost の開発中サイトもそのまま確認できます。

【このツールでできること】
2026年10月発売の折りたたみ iPhone「iPhone Duo」は、開くと 890×626 CSS px、閉じると 466×678 CSS px という、これまでの iPhone に無かったビューポートを持ちます。このツールは入力した URL をその実寸の iframeに読み込み、端末の枠ごと画面に描きます。ブレークポイントの谷間（768〜992px）に落ちる横幅で、ナビゲーションやカード並びが崩れないかを、実機を待たずに確かめられます。URL はお使いのブラウザが直接読み込むだけで、当サイトのサーバーへは送信しません。

iPhone Duo のビューポートと解像度（Apple 公式の技術仕様より）

iPhone Duo は、開くと 7.6インチ、閉じると 5.4インチの2枚の OLED ディスプレイを持つ、Apple 初の折りたたみ iPhone です。Web 制作で重要なのは物理ピクセルではなく CSS ピクセル（論理ビューポート）で、どちらの画面も デバイスピクセル比 3（@3x）なので、物理解像度を 3 で割った値がブラウザの見る幅と高さになります。

画面	対角	物理解像度	CSS ビューポート	向き
内画面（開いた状態）	7.6インチ	2670 × 1878 px 430 ppi	◎ 890 × 626 px	横長（縦持ちで 626 × 890）
外画面（閉じた状態）	5.4インチ	1398 × 2034 px 460 ppi	◎ 466 × 678 px	縦長（横持ちで 678 × 466）

※ 物理解像度・ppi・画面サイズは Apple の iPhone Duo 技術仕様ページの値です。CSS ビューポートは @3x として割った値で、Safari のアドレスバーやツールバーが占める高さは含みません。

5つの姿勢と、Web ページの見え方

iPhone Duo のヒンジは5つの姿勢に対応しています。このシミュレーターでは、それぞれの姿勢で Safari がページを描くはずのビューポートに iframe を合わせています。

姿勢	使う画面	ビューポート	想定される使い方
閉じた状態	外画面	466 × 678	片手で使う、ふつうのスマートフォンとしての利用。現行 iPhone より幅が広く、iPhone 17 Pro Max（440px）を超えます
開いて横	内画面	890 × 626	本を開いたように横に持つ、いちばん基本の開き方。多段カラム、動画、2ペインの画面に向きます
開いて縦	内画面	626 × 890	開いた状態で縦に持つ。見開きの読書やメモ書きに向きます
ノートPC型	内画面の上半分	626 × 445	下半分を机に置き、上半分を 90〜110° に立てる。Apple は下の画面に専用の操作パネルを出すと説明しているので、このツールでは上半分だけにページを映しています（Safari の実際の挙動は未公表）
テント型	外画面	678 × 466	逆V字に立てて外画面を横向きに使う。時計・カレンダー・レシピの表示など、置いたまま眺める用途

890px は「ブレークポイントの谷間」に落ちる

主要な CSS フレームワークのブレークポイントは、Bootstrap が md: 768px / lg: 992px、Tailwind CSS が md: 768px / lg: 1024px です。iPhone Duo を開いたときの横幅 890px は、どちらでも「md」の範囲に入ります。つまりタブレット向けのレイアウトが、手のひらサイズの画面に、高さ 626px という浅い天地で表示されることになります。固定ヘッダーやスクロールしない高さ指定（100vh に収める設計など）は、この浅さで窮屈になりがちです。
確認のポイント: ① ナビゲーション：768px 以上で PC 用メニューに切り替わる設計なら、890px では PC 用が出ます。タップ操作でも扱えるサイズかを見ます。 ② 高さ 626px：ファーストビューに収めたい要素（見出し・CTA・画像）が、アドレスバーぶんを引いた高さに入るかを見ます。 ③ 閉じた状態の 466px：iPhone 17 Pro Max（440px）より広く、2カラムのカード並びが 3 カラムに変わる設計なら、その境目に当たらないかを見ます。 ④ 2つの画面のあいだ：閉じた状態で開いたページは、本体を開くと 466px → 890px にビューポートが切り替わります。resize でレイアウトを組み直す JS があるなら、その動作を確かめます。

Safari は「折り目」を CSS で検知できない

折りたたみ端末向けの Web 標準として、画面が分割されている領域を取る Viewport Segments API（env(viewport-segment-width …) と @media (horizontal-viewport-segments: 2)）と、ヒンジの角度で姿勢を取る Device Posture API（@media (device-posture: folded)）があります。ただし2026年9月時点で対応しているのは Chromium 系（Chrome / Edge）だけで、iOS の Safari には実装されていません。iPhone Duo の Safari から見えるのは、ふつうの 890×626 の1枚のビューポートです。折り目の位置にボタンや入力欄が来ないよう配慮したいなら、ビューポート幅が 890px 前後のときに中央 20px ほどを避けるレイアウトにするか、内画面では 2 カラムにして中央に境界を置く設計が現実的です。iOS の iframe は WebKit のため、このシミュレーターを Safari で開いてもこれらのメディアクエリは効きません。

Chrome DevTools にカスタム端末として登録する

埋め込みを拒否するサイトや、ログインが要るページは、このシミュレーターでは表示できません。その場合は Chrome DevTools のデバイスモードに iPhone Duo の寸法を登録すると、同じ幅と高さで確認できます。上の「DevTools 用の寸法をコピー」で、登録に必要な数値をまとめてコピーできます。
① DevTools を開き、デバイスツールバー（スマートフォンのアイコン）を有効にする ② 端末の一覧から「編集…」→「カスタムデバイスを追加」 ③ 名前「iPhone Duo（開）」幅 890 高さ 626 DPR 3、種類は「モバイル」で保存 ④ 同じ手順で「iPhone Duo（閉）」幅 466 高さ 678 DPR 3 を保存

よくある質問（FAQ）

そのサイトが X-Frame-Options か Content-Security-Policy: frame-ancestors で、他サイトからの埋め込みを拒否しています。自分のサイトなら、応答ヘッダーを Content-Security-Policy: frame-ancestors 'self' https://www.mach-tools.net; に変え、X-Frame-Options を外すと表示できます。他社のサイトは表示できないので、Chrome DevTools のカスタム端末で同じ寸法を登録して確認してください。

できます。http://localhost:3000/ のように、お使いのパソコンで動いている開発サーバーの URL をそのまま入れてください。ブラウザは localhost と 127.0.0.1 を安全な接続として扱うので、https のこのページからでも埋め込めます。それ以外の http のサイトは、混在コンテンツの制限で表示できません。

ビューポートの幅と高さは実機の値ですが、描画するのはいまお使いのブラウザです。フォントの描画、デバイスピクセル比（実機は 3、このページではお使いの画面の値）、Safari のアドレスバーが占める高さ、タッチ操作の挙動は再現していません。レイアウトの崩れや折り返しの確認には十分ですが、最終確認は実機か Xcode の Simulator で行ってください。

Apple はノートPC型の姿勢を「下の画面に専用の操作パネルを出し、上の画面で動画やビデオ通話を見る」使い方として説明しています。それに合わせて、このツールでは上半分（626×445）だけにページを映し、下半分は暗い操作パネルとして描いています。Safari がこの姿勢で実際にどう描くかは 2026年9月時点で公表されていません。折り目をまたいで全面に描かれた場合の見え方は「開いて縦」（626×890）で確認できます。

Web 標準としては Viewport Segments API と Device Posture API がありますが、2026年9月時点で対応しているのは Chromium 系のブラウザだけで、iOS の Safari では使えません。iPhone Duo 向けには、幅 890px 前後のビューポートで中央付近に重要な操作を置かない、内画面では 2 カラムにして中央に境界を置く、といったビューポート幅ベースの設計が現実的です。

URL 欄の下の「新しいタブを開かせない」スイッチが入っていると、target="_blank" や window.open のリンクは止められます。他サイトのページの中身にはブラウザの決まりで触れられないため、そのリンクを枠の中で開くことはできず、押しても何も起きません。リンク先まで確認したいときはスイッチを切ってください（新しいタブで開きます）。マッハーツール自身のページだけは、スイッチが入っていても枠の中で開きます。

当サイトのサーバーへは送信しません。URL はお使いのブラウザが iframe として直接読み込むだけです。読み込み先のサイトには、ふつうにアクセスしたときと同じようにリクエストが届きます。入力内容はページを離れると消え、履歴も保存しません。