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 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 para ese elemento.
• Previsualiza ambas pantallas, 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 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.

Mantén el texto y los botones alejados de la barra de estado y la cámara

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 y la hoja deslizante
• El indicador de progreso
• 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

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.

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 en su lugar.

Diseña un único layout para ambas pantallas

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. Luego previsualiza cada pantalla:

• 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 o distribuye el contenido en más pantallas. Para mantener el botón de compra visible, colócalo en un pie de página fijo.

• 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 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.

Añadir compatibilidad con iPhone Duo a flows en vivo

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 y haz clic en él.

Tu app recibirá la última versión publicada la próxima vez que solicite un placement 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

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 para crear el flow Duo.
2. Ajusta la copia para ambas pantallas. Luego publícalo.
3. Crea un segmento con el atributo Device establecido en iPhone Duo.
4. En el placement que sirve el flow principal, añade una audiencia 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 de la audiencia Duo por encima de ella.

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