Med mobilvisningsrutor 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.
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
, använder 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.
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 | 1024 x 1366 | 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 | 1 440 x 2 960 |
Samsung Galaxy S9+ | 360 x 740 | 1 440 x 2 960 |
Samsung Galaxy S8 | 360 x 740 | 1 440 x 2 960 |
Samsung Galaxy S8+ | 360 x 740 | 1 440 x 2 960 |
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 anropas också mediefrågor.
Spara dina CSS-brytpunkter som Target så att ni kan förhandsgranska upplevelserna för varje vy ni definierar. Var och en av dessa upplevelser visas i en mobilvisningsruta i Target gränssnitt. Ö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.
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. För närvarande Target stöder inte vyportsspecifika sidändringar.
Konfigurera mobila visningsrutor som du vill göra tillgängliga när du skapar dina upplevelser.
Klicka på Administration > Visual Experience Composer.
I Mobile viewports configuration avsnitt, klicka Add.
eller
Om du vill ändra konfigurationen för en befintlig mobil visningsruta väljer du den visningsrutan och klickar sedan på knappen Edit (penna) ikon.
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.
Ange den mobila enhetens skärmstorlek, både bredd och höjd.
Bredden kan vara 150 till 968 pixlar. Höjden kan vara 150 till 1 280 pixlar.
(Valfritt) Välj operativsystem för enheten.
Alternativ:
Om du använder Förbättrad Experience Composer och välja ett operativsystem, Target emulerar den enheten när du visar sidan. Om till exempel Android ser annorlunda ut och känns annorlunda än iOS på din responsiva webbplats Target härmar det beteendet.
Klicka på Save.
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 associerad med en eller flera aktiviteter. Du måste ta bort visningsrutan från dessa aktiviteter innan du kan ta bort den."
Lägg in mobila visningsrutor i Target aktiviteter för att skapa responsiva upplevelser för mobilskärmar.
Skapa önskad aktivitet.
I Visual Experience Composer (VEC), klicka på Settings kugghjulsikonen och välj Add Mobile Viewports.
Klicka på Devices aktiverar sedan alla enheter som ska ha en mobil visningsruta.
De mobila visningsrutorna listas från minsta till största enligt bredd.
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.
Om du vill kan du växla mellan stående och liggande läge genom att klicka på önskad orienteringsikon.
I följande videofilmer finns mer information om de begrepp som beskrivs i den här artikeln.
I följande demovideo finns information om hur du använder Visual Experience Composer för att arbeta med mobila visningsrutor:
Den här videon innehåller information om hur du ställer in mobila visningsrutor, med början vid 4:40 i videon.