Mobila visningsportar för responsiva upplevelser

Med mobila visningsrutor kan du förhandsgranska dina Adobe Target-aktiviteter på skärmar av olika storlek.

Förhandsvisningsfunktionen för mobilvisningsruta är utformad för responsiva webbplatser som återges bra på olika enheter, fönster och skärmstorlekar. Responsiva sajter justeras och anpassas automatiskt efter alla skärmstorlekar, inklusive stationära datorer, bärbara datorer, surfplattor och mobiltelefoner.

NOTE
  • Använd mobila visningsrutor om webbplatsen är responsiv och samma element på skrivbordssidan används på mobilsidan i en annan konfiguration. Om du har en separat mobilwebbplats med en separat struktur, till exempel m.mysite.com, ska du använda en flersidig aktivitet i stället.

  • Mobila visningsrutor är inte tillgängliga om de överlappas av en övertäckning för omdirigeringserbjudanden.

En visningsruta definieras av storleken på rektangeln som fylls av en webbsida på skärmen. Visningsrutan har samma storlek som webbläsarfönstret, minus rullningslister och verktygsfält. I webbläsare används"CSS-pixlar". För många enheter, t.ex. enheter med retina-skärmar, är visningsrutan mindre än den annonserade enhetsupplösningen.

Nedan visas visningsrutor och upplösningar för populära enheter. Kom ihåg att använda visningsrutans storlek i Target.

NOTE
På olika webbplatser visas visningsstorlekar för populära enheter. Se till exempel https://viewportsizer.com/devices/. Besök enhetens webbplats för den mest korrekta och aktuella informationen.
Enhet
Storlek på visningsruta (bredd x höjd)
Enhetsupplösning (bredd x höjd)
iPhone 12
390 x 844
1170 x 2532
iPhone 12 Mini
360 x 780
1 080 x 2 340
iPhone 12 Pro
390 x 844
1170 x 2532
iPhone 12 Pro Max
428 x 926
1 248 x 2 778
IPHONE SE
214 x 379
640 x 1136
iPhone 11 Pro Max
414 x 896
1 242 x 2 688
iPhone 11 X Max
414 x 896
1 242 x 2 688
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
1 080 x 1 920
IPHONE 8
375 x 667
750 x 1 334
iPhone 7 Plus
414 x 736
1 080 x 1 920
IPHONE 7
375 x 667
750 x 1 334
iPhone 6s Plus
414 x 736
1 080 x 1 920
iPhone 6s
375 x 667
750 x 1 334
iPhone 6 Plus
414 x 736
1 080 x 1 920
IPHONE 6
375 x 667
750 x 1 334
iPad Pro
1 024 x 1 366
2048 x 2732
iPad Tredje och fjärde generationen
768 x 1 024
1 536 x 2 048
iPad Air 1 & 2
768 x 1 024
1 536 x 2 048
iPad Mini
768 x 1 024
768 x 1 024
iPad Mini 2 och 3
768 x 1 024
1 536 x 2 048
Nexus 6P
411 x 731
1 440 x 2 560
Nexus 5X
411 x 731
1 080 x 1 920
Google Pixel
411 x 731
1 080 x 1 920
Google Pixel XL
411 x 731
1 440 x 2 560
Google Pixel 2
411 x 731
1 080 x 1 920
Google Pixel 2 XL
411 x 823
1 440 x 2 880
Samsung Galaxy Note 5
480 x 853
1 440 x 2 560
LG G G5
360w x 640
1 440 x 2 560
LG G G4
360w x 640
1 440 x 2 560
LG G G3
360w x 640
1 440 x 2 560
Ett plus 3
480 x 853
1 080 x 1 920
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
1 440 x 2 560
Samsung Galaxy S7 Edge
360 x 640
1 440 x 2 560
Nexus 7 (2013)
600 x 960
1 200 x 1 920
Nexus 9
768 x 1 024
1 536 x 2 048
Samsung Galaxy Tab 10
800 x 1280
800 x 1280
Chromebook Pixel
1 280 x 850
2 560 x 1 700

Om du vill leverera en aktivitet till besökare på en viss enhet väljer du lämplig målgrupp för den enheten i aktivitetsdiagrammet. Använd Mobile Web Composer för att redigera sidan i aktiviteten för den enheten. Om du vill köra en aktivitet i hela den digitala upplevelsen och försäkra dig om att den ser bra ut på alla enheter ska du inte använda målinriktning. Använd i stället mobila visningsrutor för att förhandsgranska aktiviteten för varje skärmstorlek.

För responsiva webbplatser är webbplatsen vanligtvis utformad för att öppnas i en annan vy när den används av en enhet med en viss skärmstorlek. De skärmstorlekar som utlöser de nya vyerna kallas CSS-brytpunkter. CSS-brytpunkter är punkter där webbplatsinnehållet svarar beroende på enhetens bredd för att visa den optimala layouten för besökarna. CSS-brytpunkter kallas också för mediefrågor.

Spara dina CSS-brytpunkter i Target så att du kan förhandsgranska dina upplevelser för varje vy som du definierar. Var och en av de här upplevelserna visas i en mobilvisningsruta i gränssnittet Target. Öppna vyn för varje skärmstorlek genom att klicka på visningsrutan längst upp på skärmen.

Om webbplatsen inte är responsiv kan du använda Mobile Web Composer för att visa en webbplats om aktiviteten är avsedd för en viss enhet.

IMPORTANT
Du kan redigera en upplevelse inifrån mobila visningsrutor. De här ändringarna gäller dock alla visningsrutor och enheter, inte bara den visningsruta som du arbetar i. På samma sätt ändras sidan för alla skärmstorlekar, inte bara för skrivbordsvyn, när du redigerar en upplevelse i den normala skrivbordsvyn. Target har för närvarande inte stöd för visningsrutespecifika sidändringar.

Konfiguration för mobilvisningsruta task_B4B161499DC0470584ED922A4D20FCAB

Konfigurera mobila visningsrutor som du vill göra tillgängliga när du skapar dina upplevelser.

  1. Klicka på Administration > Visual Experience Composer.

  2. Klicka på Add i avsnittet Mobile viewports configuration.

    Lägg till visningsruta

    eller

    Om du vill ändra konfigurationen för en befintlig mobilvisningsruta markerar du den visningsrutan och klickar sedan på pennikonen Edit.

  3. Ange ett namn för mobilvisningsrutan.

    Ge mobilvisningsrutan ett beskrivande namn som är lätt att känna igen. Namnet kan innehålla upp till 36 tecken.

  4. Ange skärmstorleken för den mobila enheten, både bredd och höjd.

    Bredden kan vara 150 till 968 pixlar. Höjden kan vara 150 till 1 280 pixlar.

  5. (Valfritt) Välj operativsystem för enheten.

    Alternativ:

    • Android
    • iOS
    • Windows
    • Symbian
    • Blackberry

    Om du använder Förbättrad Experience Composer och väljer ett operativsystem emulerar Target den enheten när du visar sidan. Om det till exempel finns ett annat utseende och en annan känsla för Android än för iOS på din responsiva webbplats, härmar Target det beteendet.

  6. Klicka på Save.

NOTE
Om du försöker ta bort en mobil visningsruta som används visas följande meddelande:"Den här visningsrutan är för närvarande kopplad till en eller flera aktiviteter. Du måste ta bort visningsrutan från dessa aktiviteter innan du kan ta bort den."

Skapa en responsiv upplevelse task_D6332438B5EE48CCA8AF199270F1CAEF

Lägg till mobila visningsrutor i dina Target-aktiviteter för att skapa responsiva upplevelser för mobila skärmar.

  1. Skapa den önskade aktiviteten.

  2. Klicka på kugghjulsikonen Settings i Visual Experience Composer (VEC) och välj sedan Add Mobile Viewports.

    Alternativet Lägg till mobila visningsrutor

  3. Klicka på ikonen Devices och aktivera sedan alla enheter som ska ha en mobil visningsruta.

    Aktivera mobila visningsrutor

    De mobila visningsrutorna listas från minsta till största enligt bredd.

  4. Redigera mobilvyportarna efter behov.

    Alla ändringar du gör i upplevelsen tillämpas på upplevelsen på alla enheter. Du kan till exempel ändra texten i en rubrik.

    För musen över namnet på en visningsruta för att se visningsrutans storlek.

    iPhone 11 Pro Max responsiv upplevelse

  5. Om du vill kan du växla mellan stående och liggande läge genom att klicka på önskad orienteringsikon.

    Orienteringsalternativ

Utbildningsvideor

I följande videofilmer finns mer information om de begrepp som beskrivs i den här artikeln.

Visual Experience Composer (2 av 2) (7:29) brickan Översikt

I följande demovideo finns information om hur du använder Visual Experience Composer för att arbeta med mobila visningsrutor:

  • Byta namn på och duplicera en upplevelse
  • Skapa en omdirigeringsupplevelse
  • Anpassa en aktivitet till en enskild URL-adress eller en grupp URL-adresser
  • Skapa en flersidig aktivitet
  • Förgranska och skapa upplevelser för responsiva webbplatser
  • Använda övertäckningar för att markera typer av element

Kontoinställningar i Adobe Target brickan Översikt

Den här videon innehåller information om hur du ställer in mobila visningsrutor, med början vid 4:40 i videon.

recommendation-more-help
3d9ad939-5908-4b30-aac1-a4ad253cd654