Riquadri di visualizzazione per dispositivi mobili per esperienze reattive

I riquadri di visualizzazione per dispositivi mobili consentono di visualizzare in anteprima le attività Adobe Target su schermi di varie dimensioni.

La funzione di anteprima del riquadro di visualizzazione per dispositivi mobili è progettata per i siti reattivi con un rendering ottimale su vari dispositivi, finestre e dimensioni dello schermo. I siti reattivi si adattano automaticamente a qualsiasi dimensione dello schermo, compresi desktop, laptop, tablet o telefoni cellulari.

NOTA
  • I riquadri di visualizzazione per dispositivi 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 un sito mobile separato con una struttura separata, ad esempio m.mysite.com, utilizza invece un’ attività multipagina.

  • I riquadri di visualizzazione per dispositivi mobili non sono disponibili se sovrapposti da una sovrapposizione di offerta di reindirizzamento.

Un riquadro di visualizzazione è definito dalla dimensione del rettangolo compilato da una pagina web sullo schermo. Il riquadro di visualizzazione è costituito dalle dimensioni della finestra del browser, meno 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 riquadri di visualizzazione è più piccolo della risoluzione del dispositivo pubblicizzato.

Di seguito sono riportati i riquadri di visualizzazione e le risoluzioni per i dispositivi più diffusi. Ricordati di utilizzare la dimensione del riquadro di visualizzazione in Target.

NOTA

Ci sono vari siti web che elencano le misure del riquadro di visualizzazione dei dispositivi più popolari. Ad esempio, vedere https://viewportsizer.com/devices/. Consulta il sito web del produttore del dispositivo per le informazioni più precise e aggiornate.

Dispositivo Dimensioni 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 fornire un’attività ai visitatori su un determinato dispositivo, scegli il pubblico appropriato per tale dispositivo nel diagramma 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 l’aspetto corretto su tutti i dispositivi, non applicare il targeting. Utilizza invece i riquadri di visualizzazione per dispositivi mobili per visualizzare in anteprima l’attività su ogni dimensione dello schermo.

Per i siti reattivi, in genere il sito è progettato per aprirsi in una visualizzazione diversa quando vi 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 chiamati anche query multimediali.

Salva i punti di interruzione CSS in Target in modo da poter visualizzare in anteprima le esperienze per ogni visualizzazione definita. Ciascuna di queste esperienze viene visualizzata in un riquadro di visualizzazione mobile nell'interfaccia 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, utilizza il Compositore web mobile per visualizzare un sito se l’attività è destinata a un dispositivo specifico.

IMPORTANTE

Puoi modificare un’esperienza dall’interno di riquadri di visualizzazione per dispositivi mobili. Tuttavia, queste modifiche si applicano a tutti i riquadri di visualizzazione e dispositivi, non solo al riquadro di visualizzazione in cui si lavora. Analogamente, la modifica di un'esperienza nella normale visualizzazione desktop cambia la pagina per tutte le dimensioni dello schermo, non solo la visualizzazione sul desktop. Attualmente, Target non supporta le modifiche di pagina specifiche per il riquadro di visualizzazione.

Configurazione del riquadro di visualizzazione mobile

Configura i riquadri di visualizzazione per dispositivi mobili che desideri rendere disponibili durante la creazione delle esperienze.

  1. Fai clic su Amministrazione > Compositore esperienza visivo.

  2. Nella sezione Configurazione riquadri di visualizzazione mobili, fai clic su Aggiungi.

    Aggiungi riquadro di visualizzazione

    Oppure

    Per modificare la configurazione di un riquadro di visualizzazione mobile esistente, selezionalo, quindi fai clic sull'icona Modifica (matita).

  3. Inserisci un nome per il riquadro di visualizzazione per dispositivi mobili.

    Assegna alla tua finestra mobile un nome descrittivo facile da riconoscere. Il nome può essere lungo fino a 36 caratteri.

  4. Specifica le dimensioni dello schermo del dispositivo mobile, sia in larghezza che in altezza.

    La larghezza può essere compresa tra 150 e 968 pixel. L'altezza può essere compresa tra 150 e 1280 pixel.

  5. (Facoltativo) Seleziona il sistema operativo del dispositivo.

    Opzioni:

    • Android
    • iOS
    • Windows
    • Symbian
    • Blackberry

    Se utilizzi il Compositore esperienza avanzato e scegli un sistema operativo, emulerà tale dispositivo quando visualizzerai la pagina. Target Ad esempio, se per Android è disponibile un aspetto diverso rispetto a iOS nel sito reattivo, Target simula tale comportamento.

  6. Fai clic su Salva.

NOTA

Se tenti di eliminare una finestra mobile in uso, viene visualizzato il seguente messaggio: "Questo riquadro di visualizzazione è attualmente associato a una o più attività. È necessario rimuovere il riquadro di visualizzazione da tali attività prima di poterla eliminare."

Creare un'esperienza reattiva

Aggiungi i riquadri di visualizzazione per dispositivi mobili alle attività Target per creare esperienze reattive per gli schermi mobili.

  1. Crea l' attività desiderata.

  2. Nel Compositore esperienza visivo (VEC), fai clic sull'icona a forma di ruota dentata Impostazioni, quindi seleziona Aggiungi riquadri di visualizzazione mobili.

    Opzione Aggiungi riquadri di visualizzazione per dispositivi mobili

  3. Fai clic sull’icona Dispositivi, quindi attiva tutti i dispositivi che devono avere un riquadro di visualizzazione per dispositivi mobili.

    Abilita riquadri di visualizzazione per dispositivi mobili

    Le finestre mobili sono elencate dalla più piccola alla più grande secondo la larghezza.

  4. Modifica le finestre mobili come desiderati.

    Tutte le modifiche apportate all’esperienza vengono applicate all’esperienza su tutti i dispositivi. Ad esempio, si modifica il testo in un’intestazione.

    Sposta il mouse sul nome di una finestra per visualizzarne le dimensioni.

    iPhone 11 Pro Max esperienza reattiva

  5. Se lo desideri, passa dalla modalità verticale a quella orizzontale facendo clic sull’icona di orientamento desiderata.

    Opzioni di orientamento

Video di formazione

I video seguenti contengono ulteriori informazioni sui concetti descritti in questo articolo.

Compositore esperienza visivo (2 di 2) (7:29) Badge panoramica

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

Preferenze account in Adobe Target Badge panoramica

Questo video include informazioni sulla configurazione dei riquadri di visualizzazione per dispositivi mobili, a partire dal minuto 4:40.

In questa pagina

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now