iPhone Duo レスポンシブテスター | Webサイトモバイル対応チェッカー
最も正確なWebサイトレスポンシブチェッカーおよびモバイル対応検証ツール。デュアルスクリーンiPhone Duo、折りたたみ式ディスプレイ、最新端末でリアルタイムにプレビュー。
Site Blocked from Preview
has blocked embedding in iframes via X-Frame-Options or CSP.
@media (orientation: landscape)📐 Does horizontal-viewport-segments: 2 work in mockups?
The Direct Answer: Inside a normal <iframe> on desktop, @media (horizontal-viewport-segments: 2) evaluates to 1 by default.
Why? The CSS Viewport Segments specification is designed to query the underlying host operating system window, not an HTML element or CSS container. Because your desktop computer has a single unified display, standard desktop browsers report 1 segment to all page iframes.
segments: 2!spanning-css-polyfill script to your website to test dual-screen CSS rules anywhere.iPhone Duoが不完全なレスポンシブWebデザインを浮き彫りにする理由
10年以上にわたり、レスポンシブデザインは単一のキャンバスを前提としていました。AppleのデュアルスクリーンiPhone Duoの登場は、中央のヒンジで繋がれた2つのディスプレイによりこの前提を一変させます。
ヒンジの罠
中央揃えの検索バーやモーダル、CTAボタン、ヒーロー画像が、セグメント非対応のCSSでは16pxの物理ヒンジで真っ二つに分断されます。
正方形に近いアスペクト比
展開時のデュアル画面は1:1に近い比率になります。縦スクロールのみに特化したレイアウトでは大きな余白が発生しバランスを崩します。
新しいCSS標準仕様
W3CデュアルスクリーンメディアクエリやCSS環境変数(env(viewport-segment-width))は、現代のフロントエンド開発者に必須の知識です。
/* Detect iPhone Duo & dual-screen unfolded mode */
@media (horizontal-viewport-segments: 2) {
.site-container {
display: grid;
/* Map columns to screen 1 and screen 2 with fold gap in between */
grid-template-columns:
env(viewport-segment-width 0 0)
calc(env(viewport-segment-left 1 0) - env(viewport-segment-width 0 0))
env(viewport-segment-width 1 0);
}
.sidebar {
grid-column: 1;
}
.main-content {
grid-column: 3;
}
}人気のすべてのデバイスでテスト
iPhone、Android折りたたみ端末、Microsoftデュアルスクリーン間でのレスポンシブ対応を比較。
iPhone Duo (Unfolded)
7.6″ Super Retina XDR OLED (2670×1878 at 430 ppi)
iPhone Duo (Cover Folded)
5.4″ Super Retina XDR OLED (1398×2034 at 460 ppi)
iPhone 16 Pro Max
Flagship Super Retina XDR
Samsung Galaxy Z Fold 6
Dynamic AMOLED 2X Foldable
Google Pixel Fold
Foldable OLED Landscape Inner Screen
Microsoft Surface Duo 2
Dual Screen AMOLED with Physical Gap
Frequently Asked Questions
Everything you need to know about testing website responsiveness on iPhone Duo and modern devices.
iPhone Duo レスポンシブテスターとは何ですか？
iPhone Duo レスポンシブテスター (duoresponsive.com) は、Appleが新たに発表したデュアルスクリーンiPhone Duo、最新の折りたたみスマホ、モバイル端末上でWebページを検証できるオンラインWebサイトモバイル対応チェッカーです。見開きデュアル画面、閉じたカバー画面、ヒンジ幅のオフセット、デュアルスクリーン対応CSSメディアクエリをピクセル単位で高精度に再現します。
このWebサイトレスポンシブチェッカーはどのように動作しますか？
テストバーに検証したいWebサイトのURLを入力すると、ブラウザ上でハードウェアフレーム内にリアルタイムレンダリングされます。エミュレーターを導入することなく、単一画面と見開きデュアル表示の切り替え、ブック・テントポスチャのテスト、中央折り目ラインの検証、縦横回転が可能です。
なぜ従来のレスポンシブサイトがiPhone Duoで崩れてしまうのですか？
従来のWebサイトの多くは単一の連続した画面領域を前提に作られています。iPhone Duoを開いた状態では16pxの物理ヒンジを挟んだ2つの個別画面にまたがって表示されます。デュアルスクリーン対応CSS(@media (horizontal-viewport-segments: 2)やenv(viewport-segment-width))がない場合、中央揃えの検索窓やモーダル、メイン画像が真ん中で分断されてしまいます。
localhostなどのローカル開発サーバーも検証できますか？
はい！iPhone Duo レスポンシブテスターはブラウザのクライアント側で完全動作するため、http://localhost:3000やhttp://localhost:4321などのローカル開発環境URLを本番デプロイ前にそのままテストできます。
サイトが接続拒否または真っ白に表示される場合はどうすればよいですか？
一部の本番Webサイト（GoogleやX/Twitterなど）は、iframeへの埋め込みを禁止する厳格なHTTPセキュリティヘッダー（X-Frame-Options: DENYなど）を設定しています。これらのサイトでは「別タブで開く」ボタンをクリックするか、開発サーバーまたはプロキシ経由でテストしてください。