行動檢視區可讓您在各種大小的螢幕上預覽Adobe Target活動。
行動檢視區預覽功能是專為多種裝置、視窗和螢幕大小都能正常顯示的互動式網站所設計。 互動式網站會自動調整並調整以適應任何螢幕大小,包括桌上型電腦、筆記型電腦、平板電腦或行動電話。
如果網站具回應力,而桌面頁面中的相同元素也透過不同的組態用於行動頁面中,請使用行動檢視區。如果您有個別的行動網站具有個別的結構,例如m.mysite.com
,請改用多頁活動。
行動檢視區被重新導向選件覆蓋所重疊時會無法使用。
檢視區是以螢幕上的網頁所填入的矩形大小來定義。視區是瀏覽器視窗的大小,減去捲軸和工具列。 瀏覽器使用「CSS 像素」。對於許多裝置,例如有視網膜螢幕的裝置,檢視區小於公布的裝置解析度。
以下是常用裝置的檢視區和解析度。 請記得在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最大值 | 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 第 3 代與第 4 代 | 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介面的行動檢視區中。 若要開啟每一個螢幕大小的檢視,請在畫面頂端按一下該檢視區。
如果您的網站沒有回應,若您的活動已鎖定在特定裝置上,請使用Mobile Web Composer來檢視網站。
您可以從行動檢視區編輯體驗。 但是,這些變更會套用至所有的視區和裝置,而不只是您正在使用的視區。 同樣地,在標準桌面檢視中編輯體驗時,將會變更所有螢幕大小的頁面,而不只是桌面檢視。目前,Target不支援視區特定頁面的變更。
設定您要在建立體驗時提供的行動檢視區。
按一下「管理 > 視覺體驗撰寫器」。
在Mobile viewports configuration區段中,按一下Add。
或
若要變更現有行動檢視區的設定,請選取該檢視區,然後按一下「編輯」()圖示(鉛筆)。
輸入行動檢視區的名稱。
為您的行動檢視區提供易於識別的描述性名稱。名稱的長度最多可為 36 個字元。
指定行動裝置的螢幕大小,包括寬度和高度。
寬度可以是150到968像素。 高度可以是150到1280像素。
(可選) 選取裝置的作業系統。
選項:
如果您使用增強體驗撰寫器並選擇作業系統, 會在您檢視頁面時模擬該裝置。Target例如,若您的回應式網站上的Android與iOS的外觀和感覺不同,Target會模擬該行為。
按一下「儲存」。
如果您嘗試刪除正在使用的行動檢視區,會顯示下列訊息:「此視區目前與一或多個活動相關聯。 您必須先從這些活動中移除視區,才能刪除它。」
將行動檢視區加入您的Target活動,以建立行動螢幕的互動式體驗。
建立所需的活動。
在Visual Experience Composer (VEC)中,按一下「設定」齒輪圖示,然後選取「新增行動檢視區」。][
按一下「裝置」圖示,然後啟用應該具有行動檢視區的每個裝置。
行動檢視區會根據寬度從最小到最大列出。
視需要編輯行動檢視區。
您對體驗所做的任何變更都會套用至所有裝置上的體驗。 例如,您可變更標題中的文字。
將游標移至檢視區的名稱來查看檢視區的大小。
視需要按一下所要的方向圖示,在縱向和橫向模式之間切換。
以下影片含有本文章探討之概念的詳細資訊。
下列示範影片包含透過可視化體驗撰寫器來使用行動檢視區的相關資訊:
此視訊包含設定行動視訊的相關資訊,從視訊的4:40開始。