移动视区允许您在各种尺寸的屏幕上预览Adobe Target活动。
移动视区预览功能专为响应式站点而设计,这些站点可以在各种设备、窗口和屏幕大小上完美呈现。 响应式网站会自动调整和适应任何屏幕大小,包括台式机、笔记本电脑、平板电脑或手机。
如果您的网站是响应式网站,而且桌面页面与移动设备页面中使用的元素相同,只是配置不同,则可以使用移动设备视区。如果您有一个具有单独结构(如m.mysite.com
)的单独移动站点,请改用多页活动。
如果与重定向选件叠加发生了重叠,则移动设备视区将不可用。
视区通过网页在屏幕上所填充的矩形大小来定义。视口是浏览器窗口的大小,减去滚动条和工具栏。 浏览器使用“CSS 像素”。很多设备(例如使用 Retina 显示屏的设备)的视区小于其宣称的设备分辨率。
以下是常用设备的视口和分辨率。 请记住在Target中使用视口大小。
多个网站列出了常用设备的视区大小。例如,请参阅https://viewportsizer.com/devices/。 有关最准确、最新的信息,请查阅设备制造商的网站。
设备 | 视区大小 (宽x高) | 设备分辨率(宽x高) |
---|---|---|
iPhone12 | 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 |
iPhone11 | 414 x 896 | 828 x 1792 |
iPhone 11 Xr | 414 x 896 | 828 x 1792 |
iPhone 12 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 |
iPhone8 | 375 x 667 | 750 x 1334 |
iPhone 7 Plus | 414 x 736 | 1080 x 1920 |
iPhone7 | 375 x 667 | 750 x 1334 |
iPhone 6s Plus | 414 x 736 | 1080 x 1920 |
iPhone6s | 375 x 667 | 750 x 1334 |
iPhone 6 Plus | 414 x 736 | 1080 x 1920 |
iPhone6 | 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 | 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 |
要向特定设备上的访客传送活动,请在活动图中为该设备选择适当的受众。 使用移动设备 Web 编辑器可在该设备上编辑活动页面。要在整个数字体验中运行活动,以确保在所有设备上都能正常显示,请不要应用定位。 而应使用移动视口预览每个屏幕大小的活动。
对于响应式网站,通常您的网站设计为当由屏幕尺寸特定的设备访问时以不同视图打开。 这些可触发新视图的屏幕大小称为“CSS 断点”。CSS断点是指网站内容根据设备宽度做出响应的点,可向访客显示最佳布局。 CSS断点也称为媒体查询。
将CSS断点保存在Target中,这样您就可以为定义的每个视图预览体验。 这些体验中的每个都显示在Target接口的移动视口中。 单击显示屏顶部的相应视区,即可打开每个屏幕大小所对应的视图。
如果您的站点没有响应,则如果您的活动针对特定设备,请使用Mobile Web Composer视图站点。
您可以从移动视区中编辑体验。 但是,这些更改适用于所有视口和设备,而不仅仅适用于您正在使用的视口。 同样,在常规桌面视图中编辑体验时,所有屏幕大小的页面均会发生相应的更改,而不仅仅是桌面视图中的页面。当前,Target不支持特定于视图的页面更改。
配置要在创建体验时提供的移动视区。
单击管理 > 可视体验书写器。
在移动视区配置部分,单击添加。
或
要更改现有移动视口的配置,请选择该视口,然后单击编辑(铅笔)图标。
键入移动设备视区的名称。
为移动设备视区键入一个便于识别的描述性名称。名称最长可包含 36 个字符。
指定移动设备的屏幕大小,包括宽度和高度。
宽度可以是150到968像素。 高度可以是150到1280像素。
(可选)选择设备的操作系统。
选项:
如果您使用增强型体验编辑器,并选择了一种操作系统,则 会在您查看页面时模拟该设备。Target例如,如果Android与响应式站点上的iOS的外观不同,则Target会模拟该行为。
单击保存。
如果尝试删除正在使用的移动视口,将显示以下消息:"此视口当前与一个或多个活动关联。 您需要先从这些活动中删除视口,然后才能删除它。”
将移动视区添加到您的Target活动,为移动屏幕创建响应式体验。
创建所需的活动。
在Visual Experience Composer (VEC)中,单击Settings齿轮图标,然后选择添加Mobile Viewports。
单击设备图标,然后启用每个应具有移动设备视区的设备。
移动设备视区将按宽度以从小到大的顺序排列。
根据需要编辑移动设备视区。
您对体验所做的任何更改将应用于所有设备上的体验。 例如,您更改标题中的文本。
将鼠标悬停在视区名称上,以查看视区大小。
如果需要,可通过单击所需的方向图标在纵向和横向模式之间切换。
以下视频包含有关本文中所讨论概念的详细信息。
以下演示视频包含有关通过可视化体验编辑器使用移动设备视区的信息:
此视频包含有关设置移动视口的信息,从4:40开始。