Mobile Viewports for responsive experiences

Mobile viewports help you preview how your Target activities appear on screens of various sizes.

行動視訊埠預覽功能是專為可在各種裝置、視窗或螢幕大小上呈現良好效果的互動式網站所設計。 互動式網站會自動調整並調整以適應任何螢幕大小，包括桌上型電腦、筆記型電腦、平板電腦或行動電話。

檢視區是以螢幕上的網頁所填入的矩形大小來定義。即瀏覽器視窗減去捲軸和工具列之後的大小。瀏覽器使用「CSS 像素」。對於許多裝置，例如有視網膜螢幕的裝置，檢視區小於公布的裝置解析度。

以下為某些熱門裝置的檢視區和解析度。Remember to use the viewport size in Target. 有許多網站都有列出熱門裝置的檢視區大小。例如，請參 閱https://viewportsizer.com/devices/ ，或參閱裝置製造商的網站。

如果您要將活動傳送給使用特定裝置的人，請在活動圖表中選擇適合該裝置的對象。使用「行動裝置 Web 撰寫器」，針對該裝置來編輯活動中的頁面。如果您想要在整個數位體驗中執行活動，並確保在所有裝置上都完美呈現，請勿套用鎖定目標，應該使用行動檢視區以每一種螢幕大小來預覽活動。

如果您有回應式網站，則網站通常設計成由特定螢幕大小的裝置所存取時，就在不同檢視中開啟。觸發新檢視的螢幕大小稱為 CSS 中斷點。CSS中斷點是網站內容根據裝置寬度而回應的點，可顯示最佳的訪客版面。 CSS中斷點也稱為媒 體查詢。

Save your CSS breakpoints in Target so you can preview your experiences for each view you define. Each of these experiences is displayed in a mobile viewport in the Target interface. 若要開啟每一個螢幕大小的檢視，請在畫面頂端按一下該檢視區。

如果網站不具回應力，只要活動已鎖定特定裝置為目標，您仍可使用「行動裝置 Web 撰寫器」來檢視網站。

Mobile viewport configuration

建立您的體驗時，請設定您要提供使用的任何行動檢視區。

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

2. 若要新增行動檢視區，請在「行動檢視區 設定」區段中 ，按一 下「新增」。

   

   To change the configuration of an existing mobile viewport, select that viewport, then click the Edit (pencil) icon.

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

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

4. 輸入行動裝置的畫面大小，包含寬度和高度。

   寬度可以介於 150 和 968 像素之間。高度可以介於 150 和 1280 像素之間。

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

   選項:

   • Android
   • iOS
   • Windows
   • Symbian
   • Blackberry

   如果您使用增強體驗撰寫器並選擇作業系統， 會在您檢視頁面時模擬該裝置。TargetIf, for example, there is a different look and feel for Android than iOS on your responsive site, Target mimics that behavior.

6. 按一下​「儲存」。

Create a responsive experience

Add mobile viewports to your Target activities to create responsive experiences for mobile screens.

1. 建立所 需活動。

2. 在可視化體驗撰寫器中，按一下​「設定」​齒輪圖示，然後選取​「新增行動檢視區」。

   

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

   

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

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

   您對體驗進行的任何變更 (例如，如果您變更標題中的文字) 都會套用至所有裝置上的體驗。

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

   

5. 視需要按一下所要的方向圖示，在縱向和橫向模式之間切換。

   

Use Case: Target two iPhone versions

此使用案例說明如何為兩個iPhone版本設定體驗：iPhone 6和iPhone 6 Plus。

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

2. In the Mobile Viewport Configuration section, create mobile viewports for iPhone 6 and iPhone 6 plus.

   為每個檢視區使用下列設定:

   名稱	寬度	高度	作業系統
   iPhone 6	375	667	iOS
   iPhone 6 Plus	414	736	iOS

   

3. 使用您要定位的體驗建立活動。

4. 選取您要對從 iPhone 6 或 iPhone 6 Plus 存取您的網站的訪客鎖定的體驗。

5. 選取您的目標時，按一下​「建立對象」，然後設定對象，如下圖所示:

   

   因為手機可以旋轉為橫向，在結合 iPhone 裝置型號時，若同時要求高度和寬度大於 320，便會建立僅 6 和 6 Plus 能夠符合的條件。

6. 按一下​「儲存」。

7. 如您一般的作法繼續設定您的活動。

訓練影片

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

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

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

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

Adobe Target的帳戶偏好設定

此視訊包含設定行動視訊的相關資訊，從視訊的4:40開始。