Show Menu
TÓPICOS×

Mobile Viewports for responsive experiences

Mobile viewports help you preview how your Target activities appear on screens of various sizes.
O recurso de pré-visualização do visor móvel foi projetado para sites responsivos que são bem renderizados em vários dispositivos, janelas ou tamanhos de tela. Sites responsivos ajustam-se e adaptam-se automaticamente a qualquer tamanho de tela, incluindo desktops, laptops, tablets ou telefones celulares.
  • Use visores móveis se o seu site for responsivo e os mesmos elementos na sua página de desktop forem usados na sua página móvel em uma configuração diferente. If you have a separate mobile site with a separate structure, such as m.mysite.com , use a multipage activity instead.
  • Os visores móveis não estarão disponíveis se sobrepostos por uma oferta de redirecionamento.
Uma visor é definido pelo tamanho do retângulo preenchido por uma página da Web na sua tela. É o tamanho da janela do navegador, menos as barras de rolagem e as barras de ferramentas. Os navegadores usam "pixels CSS". Em vários dispositivos, como os com telas de retina, o visor é menor que a resolução de dispositivo anunciada.
Abaixo, estão visores e resoluções para alguns dispositivos populares. Lembre-se de usar um tamanho de visor no Target. Vários sites listam os tamanhos da janela de visualização de dispositivos populares. Por exemplo, consulte https://viewportsizer.com/devices/ ou consulte o site do fabricante do dispositivo.
Dispositivo
Tamanho do visor
Resolução do dispositivo
iPhone SE
375 de largura x 667 de altura
750 de largura x 1334 de altura
iPhone 11 Pro máx
414 de largura x 896 de altura
1242 de largura x 2688 de altura
iPhone 11 Xs Max
414 de largura x 896 de altura
1242 de largura x 2688 de altura
iPhone 11
414 de largura x 896 de altura
828 de largura x 1792 de altura
iPhone 11 Xr
414 de largura x 896 de altura
828 de largura x 1792 de altura
iPhone 11 Pro
375 de largura x 812 de altura
1125 de largura x 2436 de altura
iPhone 11 X
375 de largura x 812 de altura
1125 de largura x 2436 de altura
iPhone 11 Xs
375 de largura x 812 de altura
1125 de largura x 2436 de altura
iPhone X
375 de largura x 812 de altura
1125 de largura x 2436 de altura
iPhone 8 Plus
414 de largura x 736 de altura
1080 de largura x 1920 de altura
iPhone 8
375 de largura x 667 de altura
750 de largura x 1334 de altura
iPhone 7 Plus
414 de largura x 736 de altura
1080 de largura x 1920 de altura
iPhone 7
375 de largura x 667 de altura
750 de largura x 1334 de altura
iPhone 6s Plus
414 de largura x 736 de altura
1080 de largura x 1920 de altura
iPhone 6s
375 de largura x 667 de altura
750 de largura x 1334 de altura
iPhone 6 Plus
414 de largura x 736 de altura
1080 de largura x 1920 de altura
iPhone 6
375 de largura x 667 de altura
750 de largura x 1334 de altura
iPad Pro
1024 de largura x 1366 de altura
2048 de largura x 2732 de altura
iPad de terceira e quarta generação
768 de largura x 1024 de altura
1536 de largura x 2048 de altura
iPad Air 1 e 2
768 de largura x 1024 de altura
1536 de largura x 2048 de altura
iPad Mini
768 de largura x 1024 de altura
768 de largura x 1024 de altura
iPad Mini 2 e 3
768 de largura x 1024 de altura
1536 de largura x 2048 de altura
Nexus 6P
411 de largura x 731 de altura
1440 de largura x 2560 de altura
Nexus 5X
411 de largura x 731 de altura
1080 de largura x 1920 de altura
Google Pixel
411 de largura x 731 de altura
1080 de largura x 1920 de altura
Google Pixel XL
411 de largura x 731 de altura
1440 de largura x 2560 de altura
Google Pixel 2
411 de largura x 731 de altura
1080 de largura x 1920 de altura
Google Pixel 2 XL
411 de largura x 823 de altura
1440 de largura x 2880 de altura
Samsung Galaxy Note 5
480 de largura x 853 de altura
1440 de largura x 2560 de altura
LG G5
480 de largura x 853 de altura
1440 de largura x 2560 de altura
One Plus 3
480 de largura x 853 de altura
1080 de largura x 1920 de altura
Samsung Galaxy S9
360 de largura x 740 de altura
1440 de largura x 2960 de altura
Samsung Galaxy S9+
360 de largura x 740 de altura
1440 de largura x 2960 de altura
Samsung Galaxy S8
360 de largura x 740 de altura
1440 de largura x 2960 de altura
Samsung Galaxy S8+
360 de largura x 740 de altura
1440 de largura x 2960 de altura
Samsung Galaxy S7
360 de largura x 640 de altura
1440 de largura x 2560 de altura
Samsung Galaxy S7 Edge
360 de largura x 640 de altura
1440 de largura x 2560 de altura
Nexus 7 (2013)
600 de largura x 960 de altura
1200 de largura x 1920 de altura
Nexus 9
768 de largura x 1024 de altura
1536 de largura x 2048 de altura
Samsung Galaxy Tab 10
800 de largura x 1280 de altura
800 de largura x 1280 de altura
Chromebook Pixel
1280 de largura x 850 de altura
2560 de largura x 1700 de altura
Se você deseja fornecer uma atividade a pessoas em um determinado dispositivo, escolha o público-alvo apropriado para ele no diagrama de atividade. Use o Mobile Web Composer para editar a página na atividade daquele dispositivo. Se deseja executar uma atividade em toda a sua experiência digital e certificar-se de que ela funcione em todos os dispositivos, não aplique o direcionamento, e use visores móveis para visualizar a atividade em cada tela.
Se você tiver um site responsivo, normalmente ele é projetado para abrir em uma exibição diferente, quando acessado por um dispositivo com uma tela específica. Esses tamanhos de tela que acionam as novas exibições são conhecidas como pontos de interrupção de CSS. Os pontos de interrupção CSS são pontos em que o conteúdo do site responde dependendo da largura do dispositivo para exibir o layout ideal para os visitantes. Os pontos de interrupção CSS também são chamados de query de mídia.
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. Abra a exibição em cada tamanho de tela ao clicar no visor ao longo da parte superior do visor.
Se o seu site não for responsivo, você ainda poderá usar o Mobile Web Composer para exibir um site, se sua atividade estiver direcionada para um dispositivo específico.
Embora você possa editar uma experiência em visualizações móveis, essas alterações se aplicam a todos os visualizadores e dispositivos, não apenas ao visor no qual você está trabalhando. Da mesma forma, editar uma experiência na exibição de desktop normal altera a página para todos os tamanhos de tela, não somente a exibição de desktop atual. Atualmente, não suportamos alterações de página específicas do visor.

Mobile viewport configuration

Configure as janelas de visualização móvel que você deseja disponibilizar ao criar suas experiências.
  1. Clique em Administração > Visual Experience Composer .
  2. Para adicionar um novo visor móvel, na seção de configuração do visualizador móvel, clique em Adicionar .
    To change the configuration of an existing mobile viewport, select that viewport, then click the Edit (pencil) icon.
  3. Digite um nome para a janela de visualização móvel.
    Use um nome descritivo que seja fácil de reconhecer. O nome pode ter até 36 caracteres.
  4. Insira o tamanho da tela do dispositivo móvel: largura e altura.
    A largura pode estar entre 150 e 968 pixels. A altura pode estar entre 150 e 1280 pixels.
  5. (Opcional) Selecione o sistema operacional do dispositivo.
    Opções:
    • Android
    • iOS
    • Windows
    • Symbian
    • BlackBerry
    Se você usa o Enhanced Experience Composer e selecionar um sistema operacional, o emula aquele dispositivo quando você visualiza a página. Target If, for example, there is a different look and feel for Android than iOS on your responsive site, Target mimics that behavior.
  6. Clique em Salvar .

Create a responsive experience

Add mobile viewports to your Target activities to create responsive experiences for mobile screens.
  1. Crie a atividade Atividades desejada.
  2. No Visual Experience Composer, clique no ícone de engrenagem Configurações e selecione Adicionar janelas de visualização móvel .
  3. Clique no ícone Dispositivos e ative cada dispositivo com um visor móvel.
    As janelas de visualização móvel estão listadas da menor para a maior de acordo com a largura.
  4. Edite as janelas de visualização móvel conforme desejado.
    Qualquer alteração feita em uma experiência (por exemplo, se você alterar o texto em um cabeçalho) será aplicada na experiência em todos dispositivos.
    Passe o mouse sobre o nome de uma janela para ver o tamanho da janela.
  5. Se desejar, alterne entre os modos retrato e paisagem clicando no ícone de orientação desejado.

Use Case: Target two iPhone versions

Este caso de uso mostra como configurar experiências para duas versões do iPhone: iPhone 6 e iPhone 6 Plus.
  1. Clique em Administração > Visual Experience Composer .
  2. In the Mobile Viewport Configuration section, create mobile viewports for iPhone 6 and iPhone 6 plus.
    Use as seguintes configurações para cada janela:
    Nome
    Largura
    Altura
    Sistema operacional
    iPhone 6
    375
    667
    iOS
    iPhone 6 Plus
    414
    736
    iOS
  3. Crie uma atividade com a experiência que você gostaria de público alvo.
  4. Selecione a experiência que deseja exibir para visitantes que acessarem seu site com um iPhone 6 ou iPhone 6 Plus.
  5. Ao selecionar sua meta, clique em Criar público-alvo e configure um público como mostrado na imagem abaixo:
    Como o celular pode ficar na posição paisagem, o requerimento de altura e largura serem maior que 320 simultaneamente cria uma condição que somente o 6 e o 6 Plus podem atender, quando combinado com o modelo do dispositivo iPhone.
  6. Clique em Salvar .
  7. Continue configurando sua atividade como normalmente faria.

Vídeos de treinamento

Os vídeos a seguir contêm mais informações sobre os conceitos discutidos neste artigo.

Visual Experience Composer (2 de 2) (7:29)

O vídeo de demonstração a seguir inclui informações sobre o uso do Visual Experience Composer para funcionar com visores móveis:
  • Renomear e duplicar uma experiência
  • Criar uma experiência de redirecionamento
  • Direcionar uma atividade para um único URL ou um grupo de URLs
  • Criar uma atividade multipáginas
  • Visualizar e criar a experiência para sites responsivos
  • Use sobreposições para destacar tipos de elementos

Preferências de conta no emblema

Este vídeo inclui informações sobre como configurar visualizações móveis, começando às 4:40 do vídeo.