Show Menu
ARGOMENTI×

Riquadri di visualizzazione per dispositivi mobili per esperienze reattive

I riquadri di visualizzazione per dispositivi mobili consentono di visualizzare in anteprima come le attività si presentano su schermi di varie dimensioni.
La funzionalità di anteprima del riquadro di visualizzazione per dispositivi mobili è progettata per siti reattivi. 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 una versione mobile del sito separata con una struttura separata, ad esempio m.mysite.com, utilizza 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. È la dimensione della finestra del browser, senza le barre di scorrimento e la barra 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 mostrati i riquadri di visualizzazione e le risoluzioni per alcuni dispositivi popolari. Ricordati di utilizzare la dimensione del riquadro di visualizzazione in Target.
Dispositivo
Dimensioni riquadro di visualizzazione
Risoluzione del dispositivo
iPhone X
375 x 812 (larghezza x altezza)
1125 x 2436 (larghezza x altezza)
iPhone 8 Plus
414 x 736 (larghezza x altezza)
1080 x 1920 (larghezza x altezza)
iPhone 8
375 x 667 (larghezza x altezza)
750 x 1334 (larghezza x altezza)
iPhone 7 Plus
414 x 736 (larghezza x altezza)
1080 x 1920 (larghezza x altezza)
iPhone 7
375 x 667 (larghezza x altezza)
750 x 1334 (larghezza x altezza)
iPhone 6
375 x 667 (larghezza x altezza)
750 x 1334 (larghezza x altezza)
iPhone 6s
414 x 736 (larghezza x altezza)
1080 x 1920 (larghezza x altezza)
iPad Pro
1024 x 1366 (larghezza x altezza)
2048 x 2732 (larghezza x altezza)
iPad di terza e quarta generazione
768 x 1024 (larghezza x altezza)
1536 x 2048 (larghezza x altezza)
iPad Air 1 e 2
768 x 1024 (larghezza x altezza)
1536 x 2048 (larghezza x altezza)
iPad Mini
768 x 1024 (larghezza x altezza)
768 x 1024 (larghezza x altezza)
iPad Mini 2 e 3
768 x 1024 (larghezza x altezza)
1536 x 2048 (larghezza x altezza)
Nexus 6P
411 x 731 (larghezza x altezza)
1440 x 2560 (larghezza x altezza)
Nexus 5X
411 x 731 (larghezza x altezza)
1080 x 1920 (larghezza x altezza)
Google Pixel
411 x 731 (larghezza x altezza)
1080 x 1920 (larghezza x altezza)
Google Pixel XL
411 x 731 (larghezza x altezza)
1440 x 2560 (larghezza x altezza)
Google Pixel 2
411 x 731 (larghezza x altezza)
1080 x 1920 (larghezza x altezza)
Google Pixel 2 XL
411 x 731 (larghezza x altezza)
1440 x 2560 (larghezza x altezza)
Samsung Galaxy Note 5
480 x 853 (larghezza x altezza)
1440 x 2560 (larghezza x altezza)
LG G5
480 x 853 (larghezza x altezza)
1440 x 2560 (larghezza x altezza)
One Plus 3
480 x 853 (larghezza x altezza)
1080 x 1920 (larghezza x altezza)
Samsung Galaxy S9
360 x 740 (larghezza x altezza)
1440 x 2960 (larghezza x altezza)
Samsung Galaxy S9+
360 x 740 (larghezza x altezza)
1440 x 2960 (larghezza x altezza)
Samsung Galaxy S8
360 x 740 (larghezza x altezza)
1440 x 2960 (larghezza x altezza)
Samsung Galaxy S8+
360 x 740 (larghezza x altezza)
1440 x 2960 (larghezza x altezza)
Samsung Galaxy S7
360 x 640 (larghezza x altezza)
1440 x 2560 (larghezza x altezza)
Samsung Galaxy S7 Edge
360 x 640 (larghezza x altezza)
1440 x 2560 (larghezza x altezza)
Nexus 7 (2013)
600 x 960 (larghezza x altezza)
1200 x 1920 (larghezza x altezza)
Nexus 9
768 x 1024 (larghezza x altezza)
1536 x 2048 (larghezza x altezza)
Samsung Galaxy Tab 10
800 x 1280 (larghezza x altezza)
800 x 1280 (larghezza x altezza)
Chromebook Pixel
1280 x 850 (larghezza x altezza)
2560 x 1700 (larghezza x altezza)
Ci sono vari siti web che elencano le misure del riquadro di visualizzazione dei dispositivi più popolari. For example, see https://mediag.com/news/popular-screen-resolutions-designing-for-all/ or consult the device maker's website.
Se desideri inviare un'attività a persone 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. Se desideri eseguire un'attività in tutta l'esperienza digitale e assicurarti che si guardi bene su tutti i dispositivi, non applicare il targeting, e utilizza i riquadri per dispositivi mobili per visualizzare in anteprima l'attività su ogni dimensione dello schermo.
Se disponi di un sito reattivo, 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 . Salva i punti di interruzione CSS in Target per poter visualizzare in anteprima le esperienze per ogni visualizzazione definita. 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, è comunque possibile utilizzare il Compositore web per dispositivi mobili per visualizzare un sito, se l'attività è destinata a un dispositivo specifico.
Mentre è possibile modificare un’esperienza dall’interno di riquadri di visualizzazione per dispositivi mobili, queste modifiche si applicano a tutti i riquadri e dispositivi, non solo a quello 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, non sono supportate le modifiche di pagina specifiche per un riquadro di visualizzazione.

Configurazione di riquadri di visualizzazione per dispositivi mobili

Configura tutti i riquadri di visualizzazione per dispositivi mobili che desideri rendere disponibili quando crei le tue esperienze.
  1. Fai clic su Configurazione > Preferenze .
  2. Nella sezione Configurazione riquadri di visualizzazione per dispositivi mobili della pagina Preferenze account, fai clic su Aggiungi nuovo per aggiungere un riquadro di visualizzazione.
    Per modificare la configurazione di una finestra mobile esistente, seleziona quella finestra, 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. Inserisci le dimensioni dello schermo del dispositivo mobile, sia della larghezza che dell'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, Target emulerà tale dispositivo quando visualizzerai la pagina. Se, per esempio, il sito dinamico si presenta in modo diverso su Android e iOS, Target imita quel comportamento.
  6. Fai clic su Salva .

Creare un’esperienza reattiva

Aggiungi i riquadri di visualizzazione per dispositivi mobili alle attività di destinazione per creare esperienze reattive per gli schermi dei cellulari.
  1. Crea un’attività.
  2. In Compositore esperienza visivo, fai clic sull’icona a forma di ruota dentata Impostazioni , quindi seleziona 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.
    Le finestre mobili sono elencate dalla più piccola alla più grande secondo la larghezza.
  4. Modifica le finestre mobili come desiderati.
    Le modifiche apportate all'esperienza (ad esempio, se si modifica il testo in un'intestazione) vengono applicate all'esperienza su tutti i dispositivi.
    Sposta il mouse sul nome di una finestra per visualizzarne le dimensioni.
  5. Se lo desideri, passa dalla modalità verticale a quella orizzontale facendo clic sull'icona orientamento.
    • Verticale:
    • Orizzontale:

Caso d’uso: targeting per due versioni di iPhone

Questo caso d’uso spiega come configurare le esperienze per due versioni di iPhone (iPhone 6 e iPhone 6 Plus) utilizzando la funzionalità Riquadri di visualizzazione mobili di Target Standard.
  1. In Target Standard, fai clic su Configurazione > Preferenze .
  2. Nella sezione per la configurazione dei riquadri di visualizzazione per dispositivi mobili, nella pagina Preferenze, crea riquadri di visualizzazione per iPhone 6 e iPhone 6 Plus.
    Utilizza le impostazioni seguenti per ciascun riquadro di visualizzazione:
    Nome
    Larghezza
    Altezza
    Sistema operativo
    iPhone 6
    375
    667
    iOS
    iPhone 6 Plus
    414
    736
    iOS
  3. Crea un’attività con l’esperienza per la quale desideri eseguire il targeting.
  4. Seleziona l’esperienza da indirizzare ai visitatori che accedono al sito da un iPhone 6 o iPhone 6 Plus.
  5. Quando selezioni il tuo target, fai clic su Crea pubblico , quindi configura un pubblico come illustrato di seguito:
    Poiché il telefono potrebbe essere ruotato in orizzontale, con altezza e larghezza entrambi maggiori di 320 puoi creare una condizione che solo i modelli 6 e 6 Plus sono in grado di soddisfare, quando viene combinata con il modello di dispositivo iPhone.
  6. Fai clic su Salva .
  7. Continua a impostare la tua attività come di consueto.

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

Preferenze dell’account in Adobe Target

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