Las ventanillas móviles permiten obtener una vista previa de cómo aparecen las actividades de Adobe Target en pantallas de diversos tamaños.
La función de vista previa de ventanilla móvil está diseñada para sitios adaptables que se renderizan bien en varios dispositivos, ventanas y tamaños de pantalla. Los sitios adaptables se ajustan y adaptan automáticamente a cualquier tamaño de pantalla, incluidos escritorios, portátiles, tabletas o teléfonos móviles.
NOTE
Use ventanillas móviles si su sitio se adapta y si en la página móvil se usan los mismos elementos que en su página de escritorio, con otra configuración. Si tiene un sitio móvil independiente con otra estructura como, por ejemplo, m.mysite.com, utilice una actividad multipágina.
Las ventanillas móviles no están disponibles si quedan superpuestas por una superposición de oferta de redireccionamiento.
Una ventanilla móvil está definida por el tamaño del rectángulo que se rellena con una página web en la pantalla. La ventanilla es el tamaño de la ventana del explorador, menos las barras de desplazamiento y las barras de herramientas. Los navegadores usan “píxeles de CSS”. Para muchos dispositivos, como los que tienen pantallas de retina, la ventanilla móvil es menor que la resolución anunciada para el dispositivo.
A continuación tiene las ventanillas móviles y las resoluciones de dispositivos populares. No se olvide de usar el tamaño de la ventanilla móvil en Target.
NOTE
Diversos sitios web enumeran los tamaños de las ventanillas para dispositivos populares. Por ejemplo, consulte https://viewportsizer.com/devices/. Consulte el sitio web del fabricante del dispositivo para obtener la información más precisa y actualizada.
Dispositivo
Tamaño de la ventanilla (anchura x altura)
Resolución del dispositivo (ancho x alto)
iPhone 12
390 x 844
1170 x 2532
iPhone 12 Mini
360 x 780
1080 x 2340
iPhone 12 Pro
390 x 844
1170 x 2532
iPhone 12 Pro Max
428 x 926
1248 x 2778
iPhone SE
214 x 379
640 x 1136
iPhone 11 Pro Max
414 x 896
1242 x 2688
iPhone 11 Xs Max
414 x 896
1242 x 2688
iPhone 11
414 x 896
828 x 1792
iPhone 11 Xr
414 x 896
828 x 1792
iPhone 11 Pro
375 x 812
1125 x 2436
iPhone 11 X
375 x 812
1125 x 2436
iPhone 11 Xs
375 x 812
1125 x 2436
iPhone X
375 x 812
1125 x 2436
iPhone 8 Plus
414 x 736
1080 x 1920
iPhone 8
375 x 667
750 x 1334
iPhone 7 Plus
414 x 736
1080 x 1920
iPhone 7
375 x 667
750 x 1334
iPhone 6s Plus
414 x 736
1080 x 1920
iPhone 6s
375 x 667
750 x 1334
iPhone 6 Plus
414 x 736
1080 x 1920
iPhone 6
375 x 667
750 x 1334
iPad Pro
1024 x 1366
2048 x 2732
iPad de tercera y cuarta generación
768 x 1024
1536 x 2048
iPad Air 1 y 2
768 x 1024
1536 x 2048
iPad Mini
768 x 1024
768 x 1024
iPad Mini 2 y 3
768 x 1024
1536 x 2048
Nexus 6P
411 x 731
1440 x 2560
Nexus 5X
411 x 731
1080 x 1920
Google Pixel
411 x 731
1080 x 1920
Google Pixel XL
411 x 731
1440 x 2560
Google Pixel 2
411 x 731
1080 x 1920
Google Pixel 2 XL
411 x 823
1440 x 2880
Samsung Galaxy Note 5
480 x 853
1440 x 2560
LG G5
360 x 640
1440 x 2560
LG G4
360 x 640
1440 x 2560
LG G3
360 x 640
1440 x 2560
One Plus 3
480 x 853
1080 x 1920
Samsung Galaxy S9
360 x 740
1440 x 2960
Samsung Galaxy S9+
360 x 740
1440 x 2960
Samsung Galaxy S8
360 x 740
1440 x 2960
Samsung Galaxy S8+
360 x 740
1440 x 2960
Samsung Galaxy S7
360 x 640
1440 x 2560
Samsung Galaxy S7 Edge
360 x 640
1440 x 2560
Nexus 7 (2013)
600 x 960
1200 x 1920
Nexus 9
768 x 1024
1536 x 2048
Samsung Galaxy Tab 10
800 x 1280
800 x 1280
Chromebook Pixel
1280 x 850
2560 x 1700
Para ofrecer una actividad en un dispositivo concreto, elija la audiencia adecuada para ese dispositivo en el diagrama de la actividad. Use el Compositor web móvil para editar la página en la actividad de dicho dispositivo. Para ejecutar una actividad en toda la experiencia digital y garantizar que tenga el aspecto adecuado en todos los dispositivos, no aplique la segmentación. En su lugar, utilice ventanillas móviles para previsualizar la actividad en cada tamaño de pantalla.
Si tiene un sitio adaptable, se suele diseñar para que se abra en una vista diferente cuando accede un dispositivo con un tamaño de pantalla concreto. Los tamaños de pantalla que activan las vistas nuevas se conocen como puntos de interrupción CSS. Los puntos de interrupción CSS son puntos en los que el contenido del sitio web responde en función del ancho del dispositivo para mostrar el diseño óptimo a los visitantes. Los puntos de interrupción CSS también se denominan consultas de medios.
Guarde los puntos de interrupción CSS en Target para poder previsualizar las experiencias de cada vista que defina. Cada una de estas experiencias se muestra en una ventanilla móvil en la interfaz de Target. En la parte superior de la pantalla, haga clic en la ventanilla móvil correspondiente para abrir la vista de cada tamaño de pantalla.
Aunque su sitio no sea adaptable, puede usar el Compositor web móvil para ver un sitio si la actividad está dirigida a un dispositivo concreto.
IMPORTANT
Puede editar una experiencia desde las ventanillas móviles. Sin embargo, estos cambios se aplican a todas las ventanillas móviles y dispositivos, no solo a la ventanilla móvil en la que está trabajando. De modo similar, si edita una experiencia en la vista de escritorio normal, se cambia la página en todos los tamaños de pantalla, no solo en la vista de escritorio. Actualmente, Target no admite cambios de página específicos de ventanilla móvil.
Configuración de las ventanillas móviles task_B4B161499DC0470584ED922A4D20FCAB
Configure las ventanillas móviles que quiera que estén disponibles cuando cree sus experiencias.
Haga clic en Administration > Visual Experience Composer.
En la sección Mobile viewports configuration, haga clic en Add.
O
Para cambiar la configuración de una ventanilla móvil existente, selecciónela y, a continuación, haga clic en el icono Edit (lápiz).
Escriba un nombre para la ventanilla móvil.
Póngale un nombre descriptivo para que sea fácil reconocerla. El nombre puede tener hasta 36 caracteres.
Especifique el tamaño de pantalla del dispositivo móvil, tanto la anchura como la altura.
La anchura puede ser de 150 a 968 píxeles. La altura puede ser de 150 a 1280 píxeles.
(Opcional) Seleccione el sistema operativo del dispositivo.
Opciones:
Android
iOS
Windows
Symbian
BlackBerry
Si usa el Compositor de experiencias mejorado y elige un sistema operativo, Target imita ese dispositivo cuando visualiza la página. Si, por ejemplo, existe un aspecto diferente para Android y para iOS en su sitio adaptable, Target imita ese comportamiento.
Haga clic en Save.
NOTE
Si intenta eliminar una ventanilla móvil en uso, se muestra el siguiente mensaje: “Actualmente, esta ventanilla está asociada a una o varias actividades. Debe quitar la ventanilla móvil de esas actividades antes de poder eliminarla”.
Crear una experiencia adaptable task_D6332438B5EE48CCA8AF199270F1CAEF
Agregue ventanillas móviles a las actividades de Target para crear experiencias adaptables para las pantallas móviles.
En Visual Experience Composer (VEC), haga clic en el icono de engranaje de Settings y, a continuación, seleccione Add Mobile Viewports.
Haga clic en el icono Devices y, a continuación, active todos los dispositivos que deban tener una ventanilla móvil.
Las ventanillas móviles se muestran de la más grande a la más pequeña en anchura.
Edite las ventanillas móviles según quiera.
Los cambios que realice en la experiencia se aplicarán a la experiencia en todos los dispositivos. Por ejemplo, puede cambiar el texto de un encabezado.
Pase el cursor por encima del nombre de una ventanilla móvil para ver su tamaño.
Si quiere, haga clic en el icono de orientación para cambiar entre los modos horizontal y vertical.
Vídeos de formación
Los siguientes vídeos contienen más información sobre los conceptos mencionados en este artículo.
Compositor de experiencias visuales (2 de 2) (7:29)
El siguiente vídeo de demostración incluye información sobre cómo usar el Compositor de experiencias visuales para trabajar con ventanillas móviles:
Cambiar el nombre de una experiencia y duplicarla
Crear una experiencia de redirección
Segmentar una actividad en una sola dirección URL o un grupo de direcciones URL
Crear una actividad de varias páginas
Obtener una vista previa y generar experiencia para sitios web adaptables
Usar superposiciones para destacar tipos de elementos
