Visores móveis para experiências responsivas

Os visores móveis permitem que você visualize suas atividades Adobe Target em telas de vários tamanhos.

O recurso de visualização do visor móvel é projetado para sites responsivos que são renderizados em vários dispositivos, janelas e tamanhos de tela. Sites responsivos ajustam-se e se adaptam automaticamente a qualquer tamanho de tela, incluindo desktops, laptops, tablets ou telefones celulares.

OBSERVAÇÃO
  • 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. Se você tiver um site móvel separado com uma estrutura separada, como m.mysite.com, use uma atividade multipáginas.

  • 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. A janela viewport é 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 os visores e as resoluções para dispositivos populares. Lembre-se de usar um tamanho de visor no Target.

OBSERVAÇÃO

Vários sites listam os tamanhos da janela de visualização de dispositivos populares. Por exemplo, consulte https://viewportsizer.com/devices/. Consulte o site do fabricante do dispositivo para obter as informações mais precisas e atualizadas.

Dispositivo Tamanho da janela de visualização (largura x altura) Resolução do dispositivo (largura x altura)
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 de terceira e quarta generação 768 x 1024 1536 x 2048
iPad Air 1 e 2 768 x 1024 1536 x 2048
iPad Mini 768 x 1024 768 x 1024
iPad Mini 2 e 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

Para fornecer uma atividade aos visitantes em um determinado dispositivo, escolha o público-alvo apropriado para esse dispositivo no diagrama de atividades. Use o Mobile Web Composer para editar a página na atividade daquele dispositivo. Para executar uma atividade em toda a sua experiência digital para garantir que ela fique boa em todos os dispositivos, não aplique o direcionamento. Em vez disso, use janelas de visualização móvel para visualizar a atividade em cada tamanho de tela.

Para sites responsivos, normalmente o site é projetado para abrir em uma exibição diferente quando acessado por um dispositivo com um tamanho de tela específico. 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 de 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 consultas de mídia.

Salve seus pontos de interrupção de CSS em Target para que você possa visualizar suas experiências para cada exibição definida. Cada uma dessas experiências é exibida em uma janela de visualização móvel na interface Target . 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, use o Mobile Web Composer para visualizar um site se sua atividade estiver direcionada a um dispositivo específico.

IMPORTANTE

Você pode editar uma experiência nos visores móveis. No entanto, essas alterações se aplicam a todos os visores e dispositivos, não apenas ao visor em que 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, Target não suporta alterações de página específicas do visor.

Configuração do visor móvel

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. Na seção Configuração de janelas de visualização móvel, clique em Adicionar.

    Adicionar visor

    Ou

    Para alterar a configuração de uma janela de visualização móvel existente, selecione essa janela e clique no ícone Edit (lápis).

  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. Especifique o tamanho da tela do dispositivo móvel, largura e altura.

    A largura pode ser de 150 a 968 pixels. A altura pode ser de 150 a 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 Por exemplo, se houver uma aparência diferente para o Android e para o iOS no seu site responsivo, Target imita esse comportamento.

  6. Clique em Salvar.

OBSERVAÇÃO

Se você tentar excluir uma janela de visualização móvel que está em uso, a seguinte mensagem será exibida: "No momento, essa janela de visualização está associada a uma ou várias atividades. Você precisa remover o visor dessas atividades antes de poder excluí-lo."

Crie uma experiência responsiva

Adicione janelas de visualização móvel às suas atividades Target para criar experiências responsivas para telas de dispositivos móveis.

  1. Crie a atividade desejada.

  2. No Visual Experience Composer (VEC), clique no ícone de engrenagem Configurações e selecione Adicionar janelas de visualização móvel.

    Opção Adicionar janelas de visualização móvel

  3. Clique no ícone Dispositivos e ative cada dispositivo com um visor móvel.

    Ativar janelas de visualização 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.

    Todas as alterações feitas na experiência são aplicadas à experiência em todos os dispositivos. Por exemplo, você altera o texto em um cabeçalho.

    Passe o mouse sobre o nome de uma janela para ver o tamanho da janela.

    Experiência responsiva máxima do iPhone 11 Pro

  5. Se desejar, alterne entre os modos retrato e paisagem ao clicar no ícone de orientação desejado.

    Opções de orientação

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) Selo de visão geral

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 da conta no Adobe Target Selo de visão geral

Este vídeo inclui informações sobre como configurar janelas de visualização móvel, a partir de 4:40.

Nesta página

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now