回應式體驗的行動檢視區

行動檢視區可讓您在各種大小的畫面上預覽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 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
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介面的行動檢視區中。 若要開啟每一個螢幕大小的檢視,請在畫面頂端按一下該檢視區。

如果您的網站沒有回應,如果您的活動鎖定在特定裝置上,請使用行動網站撰寫器來檢視網站。

重要

您可以從行動檢視區內編輯體驗。 不過,這些變更會套用至所有檢視區和裝置,而不只是您正在使用的檢視區。 同樣地,在標準桌面檢視中編輯體驗時,將會變更所有螢幕大小的頁面,而不只是桌面檢視。目前,Target不支援檢視區專屬的頁面變更。

行動檢視區設定

設定在建立體驗時要提供使用的行動檢視區。

  1. 按一下「管理 > 可視化體驗撰寫器」。

  2. 在​行動檢視區設定​區段中,按一下​新增

    新增檢視區

    若要變更現有行動檢視區的設定,請選取該檢視區,然後按一下「編輯(鉛筆)」圖示。

  3. 輸入行動檢視區的名稱。

    為您的行動檢視區提供易於識別的描述性名稱。名稱的長度最多可為 36 個字元。

  4. 指定行動裝置的螢幕大小,包括寬度和高度。

    寬度可以是150到968像素。 高度可以是150到1280像素。

  5. (可選) 選取裝置的作業系統。

    選項:

    • Android
    • iOS
    • Windows
    • Symbian
    • Blackberry

    如果您使用增強體驗撰寫器並選擇作業系統, 會在您檢視頁面時模擬該裝置。Target例如,如果回應式網站上的Android與iOS的外觀和風格不同,Target會模擬該行為。

  6. 按一下​「儲存」

注意

如果您嘗試刪除正在使用的行動檢視區,會顯示下列訊息:「此檢視區目前與一或多個活動相關聯。 您必須先從這些活動中移除視區,才能刪除它。」

建立回應式體驗

將行動檢視區新增至您的Target活動,為行動螢幕建立回應式體驗。

  1. 建立所需的活動

  2. 在可視化體驗撰寫器 (VEC)中,按一下​Settings​齒輪圖示,然後選取​Add Mobile Viewports

    新增行動檢視區選項

  3. 按一下​「裝置」​圖示,然後啟用應該具有行動檢視區的每個裝置。

    啟用行動檢視區

    行動檢視區會根據寬度從最小到最大列出。

  4. 視需要編輯行動檢視區。

    您對體驗所做的任何變更都會套用至所有裝置上的體驗。 例如,您可以變更標題中的文字。

    將游標移至檢視區的名稱來查看檢視區的大小。

    iPhone 11 Pro Max回應式體驗

  5. 如果需要,請按一下所需的方向圖示,在直向和橫向模式之間切換。

    方向選項

訓練影片

以下影片含有本文章探討之概念的詳細資訊。

可視化體驗撰寫器 (2/2) (上午 07:29) 概述徽章

下列示範影片包含透過可視化體驗撰寫器來使用行動檢視區的相關資訊:

  • 重新命名和複製體驗
  • 建立重新導向體驗
  • 將活動鎖定在單一 URL 或一組 URL
  • 建立多頁活動
  • 針對回應性網站預覽和建置體驗
  • 使用覆蓋來強調顯示元素的類型

Adobe Target中的帳戶偏好設定概述徽章

此影片包含設定行動檢視區的相關資訊,從影片的4:40開始。

本頁內容