Riquadri di visualizzazione mobile per esperienze reattive
Last update: Sat Jul 20 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
Argomenti:
I riquadri di visualizzazione mobili consentono di visualizzare in anteprima il modo in cui le attività Adobe Target si presentano su schermi di varie dimensioni.
La funzione di anteprima del riquadro di visualizzazione mobile è progettata per i siti reattivi con un rendering ottimale su vari dispositivi, finestre e dimensioni di schermo. I siti reattivi si adattano automaticamente a qualsiasi dimensione di schermo, compresi desktop, laptop, tablet o telefoni cellulari.
NOTE
I riquadri di visualizzazione mobili si utilizzano quando il sito è reattivo e gli stessi elementi presenti nella pagina del desktop vengono utilizzati nella versione mobile della pagina in una configurazione diversa. Se disponi di una versione mobile del sito separata con una struttura separata, ad esempio m.mysite.com, utilizza invece un’attività multipagina.
I riquadri di visualizzazione mobili non sono disponibili se sovrapposti da una sovrapposizione di offerta di reindirizzamento.
Un riquadro di visualizzazione è definito dalla dimensione del rettangolo riempito da una pagina web sullo schermo. Il riquadro ha le dimensioni della finestra, escluse le barre di scorrimento e le barre degli strumenti. I browser utilizzano i “pixel CSS”. Per molti dispositivi, ad esempio quelli con schermi retina, il riquadro di visualizzazione è più piccolo della risoluzione del dispositivo pubblicizzato.
Di seguito sono mostrati i riquadri di visualizzazione e le risoluzioni dei dispositivi più diffusi. Ricordati di utilizzare la dimensione del riquadro di visualizzazione in Target.
NOTE
Ci sono vari siti web che elencano le misure del riquadro di visualizzazione dei dispositivi più popolari. Ad esempio, vedi https://viewportsizer.com/devices/. Consulta il sito web del produttore del dispositivo per informazioni più precise e aggiornate.
Dispositivo
Dimensioni del riquadro di visualizzazione (larghezza x altezza)
Risoluzione del dispositivo (larghezza x altezza)
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 di terza e quarta generazione
768 x 1024
1536 x 2048
iPad Air 1 e 2
768 x 1024
1536 x 2048
iPad Mini
768 x 1024
768 x 1024
iPad Mini 2 e 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
Per inviare un’attività ai visitatori su un determinato dispositivo, scegli il pubblico appropriato per tale dispositivo nel diagramma delle attività. Utilizza il Compositore web per dispositivi mobili per modificare la pagina nell’attività relativa a tale dispositivo. Per eseguire un’attività nell’intera esperienza digitale per garantirne la visualizzazione ottimale su tutti i dispositivi, non applicare il targeting. Utilizza invece i riquadri di visualizzazione mobili per visualizzare in anteprima l’attività su ogni dimensione di schermo.
Per quanto riguarda i siti reattivi, in genere il sito è progettato per aprirsi in una visualizzazione diversa quando si accede da un dispositivo con una dimensione dello schermo specifica. Le dimensioni dello schermo che attivano le nuove visualizzazioni sono noti come Punti di interruzione CSS. I punti di interruzione CSS sono punti in cui il contenuto del sito web risponde a seconda della larghezza del dispositivo per mostrare ai visitatori il layout ottimale. I punti di interruzione CSS sono anche denominati media query.
Salva i punti di interruzione CSS in Target per poter visualizzare in anteprima le esperienze per ogni visualizzazione che definisci. Ognuna di queste esperienze viene visualizzata in un riquadro di visualizzazione mobile nell’interfaccia di Target. Apri la visualizzazione per ogni dimensione dello schermo cliccando sul riquadro di visualizzazione corrispondente nella parte superiore del display.
Se il sito non è reattivo, puoi comunque utilizzare il compositore web per dispositivi mobili per visualizzare un sito, se l’attività è destinata a un dispositivo specifico.
IMPORTANT
Puoi modificare un’esperienza dall’interno dei riquadri di visualizzazione mobili. Tuttavia, queste modifiche si applicano a tutti i riquadri di visualizzazione e a tutti i dispositivi, non solo al riquadro di visualizzazione in cui stai lavorando. Analogamente, la modifica di un’esperienza nella normale visualizzazione desktop cambia la pagina per tutte le dimensioni di schermo, non solo la visualizzazione sul desktop. Attualmente, Target non supporta le modifiche di pagina specifiche per i riquadri di visualizzazione.
Configurazione di riquadri di visualizzazione mobili task_B4B161499DC0470584ED922A4D20FCAB
Configura i riquadri di visualizzazione mobili che desideri rendere disponibili quando crei le tue esperienze.
Fare clic su Administration > Visual Experience Composer.
Nella sezione Mobile viewports configuration, fare clic su Add.
Oppure
Per modificare la configurazione di un riquadro di visualizzazione mobile esistente, selezionare tale riquadro, quindi fare clic sull'icona Edit (matita).
Inserisci un nome per il riquadro di visualizzazione mobile.
Assegna al riquadro di visualizzazione mobile un nome descrittivo facile da riconoscere. Il nome può essere lungo fino a 36 caratteri.
Specifica le dimensioni dello schermo del dispositivo mobile, sia larghezza che altezza.
La larghezza può essere compresa tra 150 e 968 pixel. L’altezza può essere compresa tra 150 e 1280 pixel.
(Facoltativo) Seleziona il sistema operativo del dispositivo.
Opzioni:
Android
iOS
Windows
Symbian
BlackBerry
Se utilizzi il Compositore esperienza avanzato e scegli un sistema operativo, Target emulerà tale dispositivo quando visualizzerai la pagina. Ad esempio, se il sito reattivo si presenta in modo diverso su Android e iOS, Target imita quel comportamento.
Fare clic su Save.
NOTE
Se tenti di eliminare un riquadro di visualizzazione mobile in uso, viene visualizzato il seguente messaggio: “This viewport is currently associated to one or multiple activities. You need to remove the viewport from those activities before being able to delete it.” (Questo riquadro di visualizzazione è attualmente associato a una o più attività. Per eliminarlo, rimuovilo da tali attività.).
Creazione di un’esperienza reattiva task_D6332438B5EE48CCA8AF199270F1CAEF
Aggiungi i riquadri di visualizzazione mobili alle attività di Target per creare esperienze reattive per gli schermi dei cellulari.
Nel Visual Experience Composer (VEC), fai clic sull'icona a forma di ingranaggio Settings, quindi seleziona Add Mobile Viewports.
Fai clic sull'icona Devices, quindi attiva tutti i dispositivi che devono avere un riquadro di visualizzazione per dispositivi mobili.
I riquadri di visualizzazione mobili sono elencati dai più piccola ai più grandi secondo la larghezza.
Modifica i riquadri di visualizzazione mobili come desideri.
Tutte le modifiche apportate all’esperienza vengono applicate all’esperienza su tutti i dispositivi. Ad esempio, puoi modificare il testo di un’intestazione.
Sposta il mouse sul nome di un riquadro di visualizzazione per visualizzarne le dimensioni.
Se lo desideri, passa dalla modalità verticale a quella orizzontale facendo clic sull’icona dell’orientamento desiderato.
Video di formazione
I video seguenti contengono ulteriori informazioni sui concetti descritti in questo articolo.
Compositore esperienza visivo (2 di 2) (7:29)
Il video demo seguente include informazioni sull'utilizzo del Compositore esperienza visivo per lavorare con i riquadri di visualizzazione per dispositivi mobili:
Rinominare e duplicare un’esperienza
Creare un’esperienza con reindirizzamento
Indirizzare un’attività a un singolo URL o a un gruppo di URL
Creare un’attività multipagina
Creare un’esperienza e visualizzarne l’anteprima per i siti web reattivi
Evidenziare tipi di elementi con le sovrapposizioni
