iPhone Duo 向けフローの準備

iPhone Duo は、外側に細いディスプレイ、内側に広いディスプレイを備えています。他の iPhone とは異なり、縦向きの状態でも前面カメラの横にステータスバーが表示される場合があります。

Duo でフローが正しく表示されるよう、以下の手順に従ってください。

テキストとボタンをステータスバーおよびカメラから離す

Safe area をオンにすると、画面の以下の部分がステータスバーと重ならないようになります：

画面、フッター、スライディングシートの背景は、ステータスバーの背後も含めてディスプレイ全体に引き続き広がります。

個々の要素は、Safe area設定を上書きして、ステータスバーの背後に表示させることができます。これは、画像や動画に意図的な効果を持たせる場合にのみ推奨されます。

要素にFixedまたはAbsoluteポジションを設定してください。次にIgnore safe areaチェックボックスを選択します。

画像や動画を画面の残りのコンテンツと一緒にスクロールさせたい場合は、代わりに画面の上部に配置してください。

各スクリーンにはレイアウトが1つだけあります。フロー＆ペイウォールビルダーでスクリーンをデザインする際は、このセクションのヒントを参考にして、iPhone Duoの両ディスプレイに確実に対応させてください。

デバイスリストで iPhone Duo を選択し、各ディスプレイをプレビューしてください：

閉じた状態: ステータスバーが多くのスペースを占めます。以下を確認してください：
- テキストが折り返されたり切れたりしていないか
- フッターが画面の大部分を占めていないか
- 閉じる、復元、または購入ボタンが画面外に出ていないか
垂直スクロールを有効にするか、コンテンツを複数の画面に分割してください。購入ボタンを常に表示するには、スティッキーなフッターに配置してください。
Open: アプリをポートレート向けにのみ設計している場合でも、iOS はインナーディスプレイ上でランドスケープ表示することがあります。

両方の向きで読みにくいほど横に伸びてしまうコンテンツを探してください。そのコンテンツを Fixed 幅のコンテナに入れ、親要素の Alignment 設定を変更してコンテナを中央揃えにします。コンテナはどのデバイスでも幅を維持します。

コンテナの幅が最も画面の狭いスマートフォンには広すぎる場合、Width の横に警告アイコンが表示されます。アイコンが消えるまで幅を縮小してください。

Duo に合ったレイアウトを設計したものの、他のスマートフォンでは表示が崩れる場合は、Duo ユーザーに別のフローを表示してください。

Adapty が iPhone Duo サポートを追加する前に公開されたフローに最新のレイアウト改善を適用するには、そのフローを再公開してください。

Flow & Paywall Builder でフローを開きます。Publish to Live ボタンを有効にするために軽微な変更を加え、ボタンをクリックします。

アプリが次回そのフローを配信するプレースメントをリクエストしたとき、最新の公開バージョンを受信します。結果を確認するには、iPhone Duo またはXcode のシミュレーターでアプリ内のフローを開いてください。

You may prefer to design a separate flow, tailored for the Duo’s displays, instead of one layout that fits all phones:

To see the result, open your app on a real iPhone Duo.