PC画面の幅を狭めるだけの検証では、タッチ操作の感触やスマホ特有のナビゲーションバーの挙動を見落としがちです。GB Coderはデュアルディスプレイ用のプレビュー切り離し（Popout）と、実機スマホへ直接接続できるQRコード生成機能を備えています。

1. デスクトップエミュレーションの限界と実機の必要性

ブラウザの開発者ツールは幅のシミュレーションには便利ですが、静電容量式タッチやiOS Safariの100vh問題などは実際のスマートフォンでしか確認できません。

2. 独立したウィンドウへのプレビュー切り離し（Popout）

ツールバーの「Popout Preview」を押すと、iframeが別ウィンドウとして展開されます。メイン画面でMonacoを全画面表示し、サブモニターで実寸表示する運用に最適です。

3. 双方向のリアルタイム通信による変更同期

切り離したウィンドウとはpostMessageで常時接続されています。エディタでCSSやHTMLを書き換えると、フォーム入力を失うことなく即時に変更が反映されます。

4. QRコードによる実機スマートフォンでの瞬時確認

「Mobile Preview」をクリックするとQRコードが表示されます。iOSやAndroidのカメラで読み取るだけで、同一LAN内のローカルプレビューを直接スマホ上に立ち上げられます。

<!-- Standards-compliant responsive viewport meta tag -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
<style>
  /* Modern dynamic viewport sizing preventing mobile address bar jump */
  .hero-section {
    min-height: 100dvh;
    padding: clamp(1.5rem, 5vw, 4rem);
  }
</style>