モバイルビューポート設定
エクスペリエンスの作成時に使用可能にするモバイルビューポートを設定します。
-
Administration/Visual Experience Composer をクリックします。
-
「Mobile viewports configuration」セクションで、「Add」をクリックします。
または
既存のモバイルビューポートの設定を変更するには、そのビューポートを選択して、Edit (鉛筆)アイコンをクリックします。
-
モバイルビューポートの名前を入力します。
モバイルビューポートに認識しやすい説明的な名前を付けます。名前は、36 文字まで入力できます。
-
モバイルデバイスの画面サイズの幅と高さを入力します。
幅は、150 ~ 968 ピクセルにする必要があります。高さは 150 ~ 1280 ピクセルにする必要があります。
-
(オプション)デバイスのオペレーティングシステムを選択します。
オプション:
- Android
- iOS
- Windows
- Symbian
- BlackBerry
拡張 Experience Composer を使用してオペレーティングシステムを選択する場合、Target は、ページを表示する際にデバイスをエミュレートします。例えば、レスポンシブサイトで Android のルックアンドフィールが iOS と異なる場合、Target はその動作を模倣します。
-
Save をクリックします。
レスポンシブエクスペリエンスの作成
Target アクティビティにモバイルビューポートを追加して、モバイル画面用のレスポンシブエクスペリエンスを作成します。
-
目的のアクティビティを作成します。
-
Visual Experience Composer (VEC)で、Settings 歯車アイコンをクリックし、「Add Mobile Viewports」を選択します。
-
Devices アイコンをクリックし、モバイルビューポートの設定が必要な各デバイスを有効にします。
モバイルビューポートは、幅が最小のものから最大のものへと順番にリストされます。
-
必要に応じて、モバイルビューポートを編集します。
エクスペリエンスに加えた変更は、すべてのデバイスのエクスペリエンスに適用されます。例えば、見出しのテキストを変更するとします。
ビューポート名の上にマウスポインターを置くと、ビューポートのサイズが表示されます。
-
必要に応じて、目的の向きアイコンをクリックして縦長モードと横長モードを切り替えます。