移动视区用于响应式体验

上次更新： 2023-05-26

主题：
Visual Experience Composer (VEC)
查看有关此主题的更多信息

创建对象：

通过移动视区，可预览您的 Adobe Target 活动在各种大小的屏幕上的效果。

移动视区预览功能专为可在各种设备、窗口和屏幕大小上呈现出良好效果的响应式网站设计而成。响应式网站自动调整和适应任意屏幕大小，包括台式机、笔记本电脑、平板电脑或手机。

注意

如果您的网站为响应式，并在移动设备页面上以不同的配置使用桌面页面中的相同元素，则可使用移动视区。如果您有单独的移动网站采用单独的架构，例如 m.mysite.com，请改为使用多页面活动。
如果与重定向选件叠加发生了重叠，则移动设备视区将不可用。

按网页在屏幕上填充的矩形大小定义视区。视区是浏览器窗口减去滚动条和工具栏的大小。浏览器使用“CSS 像素”。很多设备（例如使用 Retina 显示屏的设备）的视区小于其宣称的设备分辨率。

常用设备的视区和分辨率如下。切记在 Target 中使用视区大小。

注意

许多网站列出常用设备的视区大小。例如，请参阅 https://viewportsizer.com/devices/。有关最准确和最新的信息，请参考设备制造商的网站。

设备	视区大小（宽度x高度）	设备分辨率（宽度 x 高度）
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 第三代和第四代	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 和 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	800 x 1280
Chromebook Pixel	1280 x 850	2560 x 1700

要向特定设备上的访客投放活动，请在活动示中选择适合该设备的受众。使用移动 Web 编辑器在该设备上编辑活动中的页面。要在您的整个数字体验中运行某项活动以确保在所有设备上均可正常显示该活动，请勿应用定位。请改用移动视区在每种屏幕大小上预览该活动。

对于响应式网站，一般将您的网站设计为在受到特定屏幕大小的设备访问时以不同的视图打开。那些触发新视图的屏幕大小称为“CSS 断点”。CSS 断点是网站内容根据设备宽度作出响应以向访客显示最优布局的那些点。CSS 断点也称为媒体查询。

请将 CSS 断点保存在 Target 中，以使您可预览自己对所定义的每个视图拥有的体验。其中每个体验都显示在 Target 界面中的某个移动视区中。通过沿显示屏的顶部单击该视区，打开每个屏幕大小的视图。

如果您的网站并非响应式，并且您的活动以特定设备为目标，则使用移动 Web 编辑器查看网站。

重要

可从移动视区中编辑体验。但是，这些更改适用于所有视区和设备，而非仅适用于您所在的视区。同样，在普通桌面视图中编辑体验将更改所有屏幕大小的页面，而非仅更改桌面视图的页面。目前，Target 不支持特定于视区的页面更改。

移动视区配置

配置要在创建体验时提供的移动视区。

单击管理 > 可视体验编辑器。
在移动视区配置部分中，单击添加。

或

要更改现有移动视区的配置，请选择该视区，然后单击编辑（铅笔）图标。
键入移动设备视区的名称。

为移动设备视区键入一个便于识别的描述性名称。名称最长可包含 36 个字符。
指定移动设备的屏幕大小，包括宽度和高度。

宽度可以在 150 到 968 像素之间。高度可以在 150 到 1280 像素之间。
（可选）选择设备的操作系统。

选项：
- Android
- iOS
- Windows
- Symbian
- Blackberry
如果您使用增强型体验编辑器并选择某个操作系统，则 Target 在您查看页面时模拟该设备。例如，如果在您的响应式网站上对于 Android 与 iOS 显示的外观不同，则 Target 模仿该行为。
单击保存。