Met mobiele viewports kunt u een voorvertoning van uw Adobe Target activiteiten op schermen van verschillende afmetingen.
De voorvertoningsfunctie voor mobiele viewport is ontworpen voor responsieve sites die goed worden weergegeven op verschillende apparaten, vensters en schermgrootten. Responsieve sites worden automatisch aangepast en aangepast aan elke schermgrootte, zoals desktops, laptops, tablets of mobiele telefoons.
NOTE
Gebruik mobiele viewports als uw site reageert en dezelfde elementen op uw desktoppagina in een andere configuratie op uw mobiele pagina worden gebruikt. Als u een aparte mobiele site hebt met een aparte structuur, zoals m.mysite.com, gebruikt u een activiteit met meerdere pagina's in plaats daarvan.
Mobiele viewports zijn niet beschikbaar als deze worden overlapt door een overlay voor omleidingsaanbiedingen.
Een viewport wordt bepaald door de grootte van de rechthoek die wordt gevuld door een webpagina op het scherm. De viewport is de grootte van het browservenster, min de schuifbalken en werkbalken. Browsers gebruiken 'CSS-pixels'. Voor veel apparaten, zoals apparaten met Retina-schermen, is de viewport kleiner dan de geadverteerde apparaatresolutie.
Hieronder staan de viewports en de resoluties voor populaire apparaten. Vergeet niet de viewport grootte te gebruiken in Target.
NOTE
Verschillende websites vermelden de viewportgrootten voor populaire apparaten. Zie bijvoorbeeld https://viewportsizer.com/devices/. Raadpleeg de website van de fabrikant van het apparaat voor de meest nauwkeurige, actuele informatie.
Apparaat
Viewportgrootte (breedte x hoogte)
Apparaatresolutie (breedte x hoogte)
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 x 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, derde en vierde generatie
768 x 1024
1536 x 2048
iPad Air 1 & 2
768 x 1024
1536 x 2048
iPad Mini
768 x 1024
768 x 1024
iPad Mini 2 en 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 Noot 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
Om een activiteit aan bezoekers op een bepaald apparaat te leveren, verkies het aangewezen publiek voor dat apparaat in het activiteitendiagram. Gebruik de Mobiele Composer van het Web om de pagina in de activiteit voor dat apparaat uit te geven. Om een activiteit over uw volledige digitale ervaring in werking te stellen om het te verzekeren goed kijkt over alle apparaten, pas geen het richten toe. Gebruik in plaats daarvan mobiele viewports om een voorvertoning van de activiteit op elke schermgrootte weer te geven.
Voor responsieve sites is uw site doorgaans ontworpen om in een andere weergave te worden geopend wanneer deze wordt geopend door een apparaat met een specifieke schermgrootte. De schermgrootten die de nieuwe weergaven activeren, worden CSS-onderbrekingspunten genoemd. CSS-onderbrekingspunten zijn punten waar de website-inhoud afhankelijk van de apparaatbreedte reageert om de optimale lay-out voor bezoekers weer te geven. CSS-onderbrekingspunten worden ook wel mediaquery's.
CSS-onderbrekingspunten opslaan in Target zodat u een voorvertoning van uw ervaringen kunt weergeven voor elke weergave die u definieert. Elk van deze ervaringen wordt weergegeven in een mobiele viewport in de Target interface. Open de weergave voor elke schermgrootte door op die viewport boven aan de weergave te klikken.
Als uw site niet reageert, gebruikt u de Mobile Web Composer om een site weer te geven als uw activiteit is gericht op een specifiek apparaat.
IMPORTANT
U kunt een ervaring bewerken vanuit mobiele viewports. Nochtans, zijn deze veranderingen op alle viewports en apparaten, niet alleen viewport van toepassing die u binnen werkt. Op dezelfde manier wordt bij het bewerken van een ervaring in de normale desktopweergave de pagina voor alle schermgrootten gewijzigd, en niet alleen voor de desktopweergave. Momenteel Target biedt geen ondersteuning voor wijzigingen die specifiek zijn voor de viewport.
Configuratie van mobiele viewport task_B4B161499DC0470584ED922A4D20FCAB
Configureer mobiele viewports die u beschikbaar wilt maken tijdens het maken van uw ervaringen.
Klik op Administration > Visual Experience Composer.
In de Mobile viewports configuration sectie, klikt u op Add.
of
Als u de configuratie van een bestaande mobiele viewport wilt wijzigen, selecteert u die viewport en klikt u op de knop Edit (potlood).
Typ een naam voor de mobiele viewport.
Geef uw mobiele viewport een beschrijvende naam die u gemakkelijk kunt herkennen. De naam mag maximaal 36 tekens lang zijn.
Geef de schermgrootte van het mobiele apparaat op, zowel de breedte als de hoogte.
De breedte kan 150 tot 968 pixels zijn. De hoogte kan 150 tot 1280 pixels zijn.
(Optioneel) Selecteer het besturingssysteem van het apparaat.
Opties:
Android
iOS
Windows
Symbian
Blackberry
Als u het Enhanced Experience Composer en kiest u een besturingssysteem; Target emuleert dat apparaat wanneer u de pagina bekijkt. Als er bijvoorbeeld een ander uiterlijk voor Android is dan voor iOS op uw responsieve site, Target bootst dat gedrag na.
Klik op Save.
NOTE
Als u probeert een mobiele viewport te verwijderen die in gebruik is, wordt het volgende bericht weergegeven: "Deze viewport is momenteel gekoppeld aan een of meerdere activiteiten. U moet viewport uit die activiteiten verwijderen alvorens het te kunnen schrappen."
Een responsieve ervaring maken task_D6332438B5EE48CCA8AF199270F1CAEF
Mobiele viewports toevoegen aan uw Target activiteiten om responsieve ervaringen voor mobiele schermen te creëren.
