---
title: "Preparar flows para iPhone Duo"
description: "Buenas prácticas para flows compatibles con iPhone Duo"
---

> **AI agents**: to search Adapty docs faster and with fewer tokens, install the Adapty skills: `npx adapty skills install --yes`

El iPhone Duo tiene una pantalla exterior estrecha y una interior ancha. A diferencia de otros iPhone, puede mostrar la barra de estado en el lateral de la pantalla, junto a la cámara frontal, incluso en orientación vertical.

Para asegurarte de que tus flows se vean bien en el Duo, sigue estos pasos:

- Mantén el [**Safe area**](#keep-text-and-buttons-clear-of-the-status-bar-and-camera) activado para que el texto y los botones no queden ocultos tras la barra de estado.
- Si algún elemento individual aparece detrás de la barra de estado, desmarca [**Ignore safe area**](#intentionally-ignore-the-iphone-duos-safe-area) para ese elemento.
- [Previsualiza ambas pantallas](#design-one-layout-to-fit-both-displays), en las dos orientaciones, antes de publicar y ajusta el diseño donde sea necesario.
- Si un flow se publicó antes de que Adapty añadiera compatibilidad con iPhone Duo, [publícalo de nuevo](#add-iphone-duo-support-to-live-flows) para aplicar las últimas mejoras de diseño.
- Si el flow del Duo necesita su propio diseño, [muestra a los usuarios del Duo un flow independiente](#show-iphone-duo-users-a-separate-flow).

## Mantén el texto y los botones alejados de la barra de estado y la cámara \{#keep-text-and-buttons-clear-of-the-status-bar-and-camera\}

Activa **Safe area** para que estas partes de la pantalla no queden tapadas por la barra de estado:

- El contenido principal
- El contenido del [pie de página](builder-containers#footer) y la [hoja deslizante](builder-containers#sliding-sheet)
- El [indicador de progreso](builder-loaders-and-progress-bars)
- Los elementos **Fixed** y **Absolute**

Los fondos de la pantalla, el pie de página y la hoja deslizante siguen ocupando toda la pantalla, incluida el área detrás de la barra de estado.

## Ignorar intencionalmente el área segura del iPhone Duo \{#intentionally-ignore-the-iphone-duos-safe-area\}

Un elemento individual puede anular la configuración de **Safe area** para aparecer detrás de la barra de estado. Esto solo se recomienda para un efecto intencionado en imágenes y vídeos.

Dale al elemento una posición **Fixed** o **Absolute**. Luego selecciona la casilla [**Ignore safe area**](manage-paywall-ui-elements#ignore-safe-area).

Para que una imagen o vídeo se desplace junto con el resto de la pantalla, [colócalo en la parte superior de la pantalla](manage-paywall-ui-elements#ignore-safe-area) en su lugar.

## Diseña un único layout para ambas pantallas \{#design-one-layout-to-fit-both-displays\}

Cada pantalla tiene un único layout. Cuando diseñes una pantalla en el Flow & Paywall Builder, sigue los consejos de esta sección para asegurarte de que se adapte a ambas pantallas del iPhone Duo.

Selecciona **iPhone Duo** en la [lista de dispositivos](builder-ui#view-controls-bottom-toolbar). Luego previsualiza cada pantalla:

- Closed **Cerrado**: La barra de estado ocupa mucho espacio. Presta atención a:
  - Texto que se corta o no cabe en pantalla
  - Un pie de página que ocupa gran parte de la pantalla
  - Un botón de cerrar, restaurar o comprar que queda fuera de la vista

  Activa el [**desplazamiento vertical**](paywall-layout-and-products#scroll) o distribuye el contenido en más pantallas. Para mantener el botón de compra visible, colócalo en un [pie de página](builder-containers#footer) fijo.

- Open **Open**: Si diseñaste tu app solo para orientación vertical, iOS puede mostrarla igualmente en horizontal en la pantalla interna.

  Busca contenido que se extienda demasiado en anchura y sea difícil de leer en ambas orientaciones. Ponlo en un contenedor con anchura **Fixed**. Luego [centra el contenedor](manage-paywall-ui-elements#alignment) cambiando el ajuste de **Alignment** de su elemento padre. El contenedor mantendrá su anchura en cualquier dispositivo.

  Si el contenedor es demasiado ancho para los teléfonos más estrechos, aparece un icono de advertencia junto a **Width**. Reduce el ancho hasta que desaparezca el icono.

Si diseñas un layout que se ve bien en el Duo pero no en otros teléfonos, [muestra a los usuarios del Duo un flow independiente](#show-iphone-duo-users-a-separate-flow).

## Añadir compatibilidad con iPhone Duo a flows en vivo \{#add-iphone-duo-support-to-live-flows\}

Para aplicar las últimas mejoras de diseño a un flow que se publicó antes de que Adapty añadiera compatibilidad con iPhone Duo, publícalo de nuevo.

Abre el flow en el Flow & Paywall Builder. Realiza un cambio menor para activar el botón [**Publish to Live**](builder-save-publish#publish-a-flow) y haz clic en él.

Tu app recibirá la última versión publicada la próxima vez que solicite un [placement](placements) que sirva el flow. Para ver el resultado, abre el flow en tu app en un iPhone Duo o en el simulador del teléfono en Xcode.

## Mostrar un flow separado a usuarios de iPhone Duo \{#show-iphone-duo-users-a-separate-flow\}

Puede que prefieras diseñar un flow independiente, adaptado a las pantallas del Duo, en lugar de un solo diseño que se ajuste a todos los teléfonos:

1. [Copia un flow existente](copy-flows) para crear el flow Duo.
2. Ajusta la copia para [ambas pantallas](#design-one-layout-to-fit-both-displays). Luego [publícalo](builder-save-publish#publish-a-flow).
3. [Crea un segmento](segments#creation) con el atributo **Device** establecido en **iPhone Duo**.
4. En el placement que sirve el flow principal, [añade una audiencia](add-audience-paywall-ab-test) con el segmento Duo y el flow Duo.
5. Si otra audiencia del placement también puede coincidir con usuarios de Duo, [sube la prioridad](change-audience-priority) de la audiencia Duo por encima de ella.

Para ver el resultado, abre tu app en un iPhone real Duo.