Motorola Moto E5 Plus : viewport CSS de 360 × 720 px, resolução e teste responsivo

Lançado em 2018, Motorola Moto E5 Plus exibe um viewport CSS de 360 x 720 pixels. Aqui estão todas as suas características de exibição e como verificar o design responsivo do seu site neste modelo.

Motorola Android 8.0 Smartphone 2018

Testar no simulador

Gratuito 4,9/5 em 5.100 avaliações 1.000.000 usuários

Instalar a extensão
Motorola Moto E5 Plus, viewport CSS de 360 x 720 pixels, testável no simulador

Características Motorola Moto E5 Plus

Viewport CSS
360 x 720 px
Densidade de pixel
2x
Resolução do fabricante
720 x 1440 px
Diagonal
6" (15,2 cm)
Densidade física
268 ppi
Proporção de tela
18:9
Sistema
Android 8.0
Ano de lançamento
2018

Por que testar seu site no Motorola Moto E5 Plus?

Viewport estreito

Com apenas 360 pixels de largura, Motorola Moto E5 Plus faz parte dos formatos mais desafiadores. É aí que as tabelas transbordam, os títulos são cortados de forma inadequada e os botões se tornam muito pequenos.

Hardware mais antigo

O hardware Motorola Moto E5 Plus é de 2018. Seu processador torna visíveis as animações caras, os scripts muito pesados e os tempos de exibição que os dispositivos mais recentes mascaram.

Densidade de 2x

Com uma densidade de 2x, Motorola Moto E5 Plus fornece a referência útil para verificar se suas imagens permanecem nítidas sem fornecer arquivos desnecessariamente pesados.

Resolução do viewport CSS Motorola Moto E5 Plus

Esta é a resolução que sua folha de estilo realmente manipula. É ela que decide o breakpoint aplicado, o número de colunas exibidas e o tamanho das suas imagens.

360 pixels em largura (width)

720 pixels em altura (height)

A altura permanece indicativa: Safari, Chrome e outros navegadores móveis reduzem a área visível com sua barra de endereço, que se retrai ao rolar.

Atenção ao analisar suas estatísticas: algumas ferramentas só mostram a resolução do fabricante, nunca o viewport CSS apresentado aqui.

Densidade de pixel Motorola Moto E5 Plus

O device pixel ratio Motorola Moto E5 Plus é de 2. Cada pixel CSS é, portanto, renderizado por 2 pixels físicos, o que torna imediatamente visível qualquer imagem fornecida em resolução simples.

Resolução do fabricante Motorola Moto E5 Plus

É o número de pixels físicos da tela, conforme anunciado pelo fabricante. Útil para preparar suas exportações de imagens, inútil para suas media queries.

  • 720 pixels em largura
  • 1440 pixels em altura
  • 268 pixels por polegada (ppi)
  • 6 polegadas de diagonal, ou seja, 15,2 cm
  • Proporção de tela de 18:9

Media queries e trechos de código para Motorola Moto E5 Plus

Esses trechos são gerados a partir das características exatas Motorola Moto E5 Plus. Copie-os diretamente para sua folha de estilo ou configuração.

Media query CSS

Direciona as telas cuja largura corresponde à de Motorola Moto E5 Plus e aos modelos de mesmo formato.

@media only screen and (min-width: 360px) and (max-width: 719px) {
  /* Motorola Moto E5 Plus */
}

Media query de densidade

Serve imagens de alta resolução para telas de pelo menos 2x.

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-resolution: 192dpi) {
  /* Imagens e ícones de alta densidade */
}

Configuração Tailwind

Adiciona um breakpoint nomeado à largura exata Motorola Moto E5 Plus.

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'motorola-moto-e5-plus': '360px'
    }
  }
}

Detecção em JavaScript

Detecta o formato e a densidade no lado do cliente.

const isDeviceWidth = window.matchMedia('(min-width: 360px)').matches;
const isHighDensity = window.devicePixelRatio >= 2;

Tag meta viewport

Indispensável para que Motorola Moto E5 Plus use seu viewport CSS e não uma largura simulada de 980 pixels.

<meta name="viewport" content="width=device-width, initial-scale=1">

Simulador Motorola Moto E5 Plus gratuito

Mobile FIRST ainda não integra Motorola Moto E5 Plus, mas um modelo com formato idêntico está incluído. Você já pode validar seus breakpoints e sua densidade de exibição.

É aí que a diferença com o modo responsivo do Chrome DevTools é visível: o DevTools redimensiona uma janela, a extensão reproduz o navegador do dispositivo e permite exportar capturas e vídeos compartilháveis.

  1. 01 Instalar a extensão — Adicione Mobile FIRST ao Chrome, Firefox ou Edge. A instalação é gratuita e não requer conta.
  2. 02 Abrir a página a testar — Acesse a URL a ser verificada, incluindo um endereço local como localhost:3000.
  3. 03 Escolher Motorola Moto E5 Plus — Selecione Motorola Moto E5 Plus na lista de dispositivos. O viewport muda para 360 x 720 pixels e o User-Agent móvel é aplicado.
  4. 04 Verificar o render — Role, mude a orientação, teste seus formulários, e então capture uma imagem ou vídeo para compartilhar.

Teste seu site no Motorola Moto E5 Plus diretamente no seu navegador, sem comprar o dispositivo.

  • Mais de 70 dispositivos incluídos, incluindo um modelo de formato idêntico
  • Viewport, User-Agent e eventos táteis reais
  • Funciona também em localhost e em pré-produção
  • Capturas de tela e vídeos exportáveis

Comparativo com modelos próximos

Os formatos vizinhos Motorola Moto E5 Plus são aqueles a serem testados logo em seguida, pois são eles que revelam os breakpoints mal posicionados.

Comparativo das resoluções Motorola Moto E5 Plus e dos modelos próximos
Modelo Viewport CSS Densidade de pixel Resolução do fabricante
Motorola Moto E5 Plus 360 x 720 2x 720 x 1440
Apple iPhone SE 320 x 568 2x 640 x 1136
Apple iPhone SE 375 x 667 2x 750 x 1334
Huawei P30 PRO 360 x 780 3x 1080 x 2340
Apple iPhone 12 Mini 360 x 780 3x 1080 x 2340
Samsung Galaxy A12 360 x 800 2x 720 x 1600
Motorola Razr 70 Ultra 412 x 1008 3x 1236 x 3024

Perguntas frequentes sobre Motorola Moto E5 Plus

Qual é a resolução do viewport CSS Motorola Moto E5 Plus?

O viewport CSS Motorola Moto E5 Plus mede 360 pixels de largura e 720 pixels de altura. É essa largura que deve ser usada para definir suas media queries, não a resolução do fabricante.

Qual é a densidade de pixel Motorola Moto E5 Plus?

O device pixel ratio Motorola Moto E5 Plus é de 2. Portanto, cada pixel CSS é exibido por 2 pixels físicos, o que exige fornecer suas imagens em 2x para que permaneçam nítidas.

Qual é a resolução de tela Motorola Moto E5 Plus?

A tela Motorola Moto E5 Plus exibe 720 x 1440 pixels físicos. É o valor que a maioria das ferramentas de análise retorna, enquanto seu CSS trabalha em um viewport de 360 x 720 pixels.

Como testar meu site no Motorola Moto E5 Plus sem o dispositivo?

Instale a extensão Mobile FIRST no Chrome, Firefox ou Edge, e selecione Motorola Moto E5 Plus. Sua página será exibida em um viewport de 360 x 720 pixels com o User-Agent móvel correspondente, em dois cliques e gratuitamente.

Qual a diferença com o modo responsivo do Chrome DevTools?

DevTools redimensiona a janela e aplica uma emulação parcial. Mobile FIRST aplica além disso o User-Agent Motorola Moto E5 Plus, os eventos táteis, o comportamento de rolagem e a aparência real do dispositivo, e permite capturar imagens e vídeos diretamente utilizáveis.

Posso testar um endereço em localhost no Motorola Moto E5 Plus?

Sim. A extensão funciona em qualquer URL aberta no seu navegador, incluindo localhost:3000, 127.0.0.1 ou um ambiente de pré-produção protegido por senha.

É necessário comprar um Motorola Moto E5 Plus para testar seu site?

Não. A simulação cobre a imensa maioria das necessidades de desenvolvimento a custo zero. Um teste final em dispositivo real ainda é recomendado antes de uma produção crítica, mas não é mais necessário a cada iteração.

Qual media query usar para direcionar Motorola Moto E5 Plus?

Uma media query na largura exata direciona Motorola Moto E5 Plus: @media only screen and (min-width: 360px). Combine-a com a densidade de pixel para direcionar precisamente este modelo e aqueles que compartilham seu formato.