모바일 뷰포트를 사용하면 사용자의 Adobe Target 활동을 다양한 크기의 화면에서 미리 볼 수 있습니다.
모바일 뷰포트 미리보기 기능은 다양한 장치, 창 및 화면 크기에서 잘 렌더링되는 반응형 사이트를 위해 설계되었습니다. 반응형 사이트는 데스크탑, 노트북, 태블릿 또는 휴대폰을 포함하여 모든 화면 크기를 자동으로 조정하고 적응합니다.
NOTE
사이트가 응답하고 데스크탑 페이지에 있는 것과 동일한 요소가 다른 구성으로 모바일 페이지에서 사용되는 경우 모바일 뷰포트를 사용하십시오. m.mysite.com과 같이 별도의 구조로 구성된 별도의 모바일 사이트가 있는 경우 여러 페이지 활동을 대신 사용하십시오.
리디렉션 오퍼 오버레이와 겹칠 경우에는 모바일 뷰포트를 사용할 수 없습니다.
뷰포트는 화면의 웹 페이지에 의해 채워진 사각형의 크기로 정의됩니다. 뷰포트는 스크롤 막대 및 도구 모음을 제외한 브라우저 창의 크기입니다. 브라우저는 "CSS 픽셀"을 사용합니다. Retina 화면을 사용하는 장치와 같이 많은 장치의 경우, 뷰포트는 광고된 장치 해상도보다 작습니다.
다음은 자주 찾는 장치에 대한 뷰포트 및 해상도입니다. Target의 뷰포트 크기를 사용하십시오.
NOTE
다양한 웹 사이트에서 많이 사용되는 장치에 대한 뷰포트 크기 목록을 제공합니다. (예: 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 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
특정 장치에서 방문자에게 활동을 전달하려면 활동 다이어그램에서 해당 장치에 적합한 대상자를 선택하십시오. 모바일 웹 작성기를 사용하여 해당 장치용 활동의 페이지를 편집하십시오. 디지털 환경 전체에서 활동을 실행하여 모든 장치에서 잘 보이도록 하려면 타기팅을 적용하지 마십시오. 대신 모바일 뷰포트를 사용하여 각 화면 크기에서 활동을 미리 볼 수 있습니다.
반응형 사이트의 경우 일반적으로 특정 화면 크기의 장치로 액세스할 때 다른 보기에서 사이트가 열릴 수 있도록 설계되어 있습니다. 새 보기를 트리거하는 이러한 화면 크기는 CSS 중단점으로 알려져 있습니다. CSS 중단점은 방문자에게 최적의 레이아웃을 표시하기 위해 웹 사이트 콘텐츠가 장치 폭에 따라 다르게 반응하는 지점입니다. CSS 중단점은 미디어 쿼리라고도 합니다.
Target에서 CSS 중단점을 저장하여 정의하는 각각의 보기에 대한 경험을 미리 볼 수 있도록 하십시오. 이러한 각 경험은 Target 인터페이스의 모바일 뷰포트에 표시됩니다. 디스플레이 상단에 있는 해당 뷰포트를 클릭하여 각 화면 크기에 대한 보기를 여십시오.
사이트가 반응형이 아니라면 활동이 특정 장치에 타기팅된 경우 모바일 웹 작성기를 사용하여 사이트를 볼 수 있습니다.
IMPORTANT
모바일 뷰포트 내에서 경험을 편집할 수 있습니다. 단, 이러한 변경 내용은 작업 중인 뷰포트뿐만 아니라 모든 뷰포트 및 장치에 적용됩니다. 마찬가지로, 일반 데스크탑 보기에서 경험을 편집하면 페이지가 데스크탑 보기뿐만 아니라 모든 화면 크기용으로 변경됩니다. 현재 Target은 뷰포트별 페이지 변경을 지원하지 않습니다.