モバイルでテストする

ビルダーのレスポンシブビューポートスイッチャーで素早く確認し、モバイル固有の動作に関わる部分は実機でテストするために公開してください。

Proyecta のモバイルテストには2つの段階があります。ビルダー内のレスポンシブプレビューと、公開済みURLでの実機テストです。

ビルダーのレスポンシブプレビュー

プレビューパネルのアドレスバーにはビューポートスイッチャーが含まれています。

モード	寸法
Desktop	ウィンドウの全幅
Tablet	768 × 1024
Mobile	390 × 844

編集中に切り替えることで、レイアウトの問題を早期に発見できます。これは明らかなレスポンシブのバグ（はみ出し、グリッドの崩れ、タップできないボタン）を見つける最も速い方法です。

QRコードでスマートフォンに開く

実機への最速の方法は、ダッシュボードの Mobile → Test タブです。アプリを公開すると QR code が表示されるので、スマートフォンのカメラでスキャンするだけでライブアプリをすぐに開けます。URLを自分に送りたい場合は Copy link ボタンも用意されています。（まだ公開していない場合、タブには先に公開するよう促すメッセージが表示されます。実機テストにはライブURLが必要です。）

実機でテストする

ビューポートスイッチャーは寸法をシミュレートするだけで、タッチ入力・実際のレイテンシー・モバイルブラウザの癖・プラットフォーム固有の動作はシミュレートしません。実際に重要な機能（タッチ操作、インストールプロンプト、プッシュ通知、カメラ、GPS）は実機でテストしてください。

アプリを公開して *.proyecta.live サブドメインに割り当てる
URLを開く — スマートフォンのブラウザで
PWAサポートを追加している場合は、Add to Home Screen を選択してインストール済みの体験をテストする
重要なフローを一通り操作する

実機でしか確認できないこと

タップターゲットのサイズ — 指はマウスポインターより大きい
Sticky 要素 — ビューポートの単位はモバイルブラウザのChromeによって異なる動作をする
フォーム入力 — オートフィル、キーボードの種類、オートコンプリート
iOS Safari の癖 — 100vh の問題、スクロールバウンス、fixed 配置
プッシュ通知の許可フロー — HTTPS 上のトップレベルブラウザタブで公開済みオリジンからのみ動作します。ビルダーのプレビューパネル内では起動しません（プレビューがすでに HTTPS で配信されている場合でも）。
実際の（低速な）ハードウェアでのパフォーマンス

テストのヒント

スマートフォンのデベロッパーツールを使う。 macOS の Safari はモバイル Safari に接続してライブデバッグができます。Chrome は Android Chrome に接続できます。
ランドスケープ（横向き）でもテストする。 多くの開発者はポートレートのみでテストして横向きのバグを見逃します。
低電力モードをオンにしてテストする。 アニメーションやタイマーの動作が変わります。
PWAのプッシュ通知は実際の iPhone でテストする。 iOS でのプッシュ通知は Safari 経由でインストールした PWA からのみ動作します。