Mobile Viewports für responsive Erlebnisse

Last update: Sat Jul 20 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Themen:

Mit mobilen Viewports können Sie eine Vorschau Ihrer Adobe Target-Aktivitäten auf unterschiedlich großen Bildschirmen anzeigen.

Die Vorschaufunktion für mobile Viewports wurde für responsive Websites entwickelt, damit diese auf verschiedenen Geräten und Bildschirmgrößen gut dargestellt werden. Responsive Websites passen sich automatisch an jede Bildschirmgröße an, einschließlich Desktops, Laptops, Tablets oder Mobiltelefone.

NOTE

Verwenden Sie mobile Viewports, wenn Ihre Site responsiv ist und dieselben Elemente auf Ihrer Desktop-Seite in einer anderen Konfiguration auf Ihrer mobilen Seite verwendet werden. Wenn Sie über eine separate mobile Site mit einem separaten Aufbau verfügen, zum Beispiel m.mysite.com, verwenden Sie stattdessen eine mehrseitige Aktivität.
Mobile Viewports sind nicht verfügbar, wenn sie von einem Umleitungsangebot überlagert werden.

Ein Viewport wird durch die Größe des Rechtecks definiert, das von einer Webseite auf Ihrem Bildschirm ausgefüllt wird. Der Viewport entspricht der Größe des Browser-Fensters abzüglich der Bildlaufleisten und Symbolleisten. Browser verwenden „CSS-Pixel“. Für viele Geräte, zum Beispiel solche mit Retina-Bildschirm, ist der Viewport kleiner als die beworbene Geräteauflösung.

Nachstehend finden Sie die Viewports und Auflösungen für häufig verwendete Geräte. Denken Sie daran, die Viewport-Größe in Target zu verwenden.

NOTE

Auf verschiedenen Websites sind die Viewport-Größen für gängige Geräte aufgeführt. Ein Beispiel finden Sie unter https://viewportsizer.com/devices/. Die genauesten und aktuellsten Informationen finden Sie auf der Website des Geräteherstellers.

Gerät

Viewport-Größe (Breite x Höhe)

Geräteauflösung (Breite x Höhe)

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 der 3. und 4. Generation

768 x 1024

1536 x 2048

iPad Air 1 und 2

768 x 1024

1536 x 2048

iPad Mini

768 x 1024

iPad Mini 2 und 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

360w x 640

1440 x 2560

LG G4

360w x 640

1440 x 2560

LG G3

360w 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

Chromebook Pixel

1280 x 850

2560 x 1700

Wenn Sie eine Aktivität für Besucher auf einem bestimmten Gerät bereitstellen möchten, wählen Sie im Aktivitätsdiagramm die entsprechende Zielgruppe für das Gerät aus. Verwenden Sie den Mobile Web Composer, um die Seite für das Gerät in der Aktivität zu bearbeiten. Wenn Sie eine Aktivität für das gesamte digitale Erlebnis ausführen und sicherstellen möchten, dass sie auf allen Geräten gut dargestellt wird, wenden Sie kein Targeting an. Verwenden Sie stattdessen mobile Viewports, um eine Vorschau der Aktivität auf jeder Bildschirmgröße anzuzeigen.

Eine responsive Site wird in der Regel so erstellt, dass beim Zugriff durch ein Gerät mit einer bestimmten Bildschirmgröße eine andere Ansicht geöffnet wird. Diese Bildschirmgrößen, die solche neuen Ansichten auslösen, werden auch als CSS Breakpoints bezeichnet. CSS Breakpoints sind Punkte, an denen der Website-Inhalt abhängig von der Gerätebreite reagiert, um Besuchern das optimale Layout anzuzeigen. CSS Breakpoints werden auch als Medienabfragen bezeichnet.

Speichern Sie Ihre CSS Breakpoints in Target, damit Sie für jede definierte Ansicht eine Vorschau für Ihr Erlebnis anzeigen können. Jedes dieser Erlebnisse wird in der Target-Benutzeroberfläche in einem mobilen Viewport angezeigt. Öffnen Sie die Ansicht für jeden Bildschirm, indem Sie entlang der Oberkante der Anzeige auf diesen Viewport klicken.

Wenn Ihre Site nicht responsiv und Ihre Aktivität auf ein bestimmtes Gerät ausgerichtet ist, können Sie zum Anzeigen einer Site den Mobile Web Composer verwenden.

IMPORTANT

Sie können ein Erlebnis über mobile Viewports bearbeiten. Diese Änderungen gelten jedoch für alle Viewports und Geräte, nicht nur für den Viewport, in dem Sie arbeiten. Gleichermaßen wird bei der Bearbeitung eines Erlebnisses in der normalen Desktop-Ansicht die Seite für alle Bildschirmgrößen und nicht nur für die Desktop-Ansicht geändert. Zurzeit unterstützt Target keine Viewport-spezifischen Seitenänderungen.

Konfigurieren von mobilen Viewports task_B4B161499DC0470584ED922A4D20FCAB

Konfigurieren Sie die mobilen Viewports, die Sie verfügbar machen möchten, während Sie Ihre Erlebnisse erstellen.

Klicken Sie auf Administration > Visual Experience Composer.
Klicken Sie im Abschnitt Mobile viewports configuration auf Add.

Oder

Um die Konfiguration eines vorhandenen mobilen Viewports zu ändern, wählen Sie diesen Viewport aus und klicken Sie dann auf das Symbol Edit (Bleistift).
Geben Sie einen Namen für den mobilen Viewport ein.

Geben Sie Ihrem mobilen Viewport einen beschreibenden Namen, der leicht wiederzuerkennen ist. Der Name kann aus bis zu 36 Zeichen bestehen.
Definieren Sie die Bildschirmgröße des Mobilgeräts mit Breite und Höhe.

Die Breite kann 150 bis 968 Pixel betragen. Die Höhe kann 150 bis 1280 Pixel betragen.
(Optional) Wählen Sie das Betriebssystem des Geräts aus.

Optionen:
- Android
- iOS
- Windows
- Symbian
- BlackBerry
Wenn Sie Enhanced Experience Composer verwenden und ein Betriebssystem auswählen, emuliert Target dieses Gerät, wenn Sie die Seite aufrufen. Wenn beispielsweise Ihre responsive Site auf Android eine andere Oberfläche aufweist als auf iOS, ahmt Target dieses Verhalten nach.
Klicken Sie auf Save.

NOTE

Wenn Sie versuchen, einen verwendeten mobilen Viewport zu löschen, wird die folgende Meldung angezeigt: „Dieser Viewport ist derzeit mit einer oder mehreren Aktivitäten verknüpft. Entfernen Sie den Viewport aus diesen Aktivitäten, um ihn zu löschen“.

Erstellen eines responsiven Erlebnisses task_D6332438B5EE48CCA8AF199270F1CAEF

Fügen Sie Ihren Target-Aktivitäten mobile Viewports hinzu, um responsive Erlebnisse für Mobilgeräte zu erstellen.

Erstellen Sie die gewünschte Aktivität.
Klicken Sie im VEC (0) auf das Zahnradsymbol Settings und wählen Sie dann Add Mobile Viewports aus.Visual Experience Composer
Klicken Sie auf das Symbol Devices und aktivieren Sie dann jedes Gerät, das über einen mobilen Viewport verfügen soll.

Die mobilen Viewports sind nach Breite aufsteigend (vom kleinsten zum größten) aufgelistet.
Bearbeiten Sie die mobilen Viewports nach Bedarf.

Alle Änderungen, die Sie am Erlebnis vornehmen, werden auf allen Geräten auf das Erlebnis angewendet. Beispiel: Sie ändern den Text in einer Überschrift.

Bewegen Sie den Mauszeiger über den Namen eines Viewports, um die Größe des Viewports anzuzeigen.
Wechseln Sie nach Bedarf zwischen dem Hoch- und Querformat, indem Sie auf das jeweilige Ausrichtungssymbol klicken.