1

Estou realizando a criação de um site, porém ainda esta apenas na minha maquina no localhost, como faço para testar em tamanhos de telas diferentes como por exemplo em telas de smartphones, androids, SOS, mas, firefox, chorme ... quero que este site seja compativel com todas as telas, estou utilizando o bootstrap 4, e fazendo o teste no firefox minimizando e aumentando a tela, porém acho que não é a forma certa a fazer.

4
  • 1
    Já tentou Ctrl+Shift+M?
    – Woss
    7/03/2018 às 23:44
  • Você pode usar o próprio navegador para isso. Clique com botão direito do mouse e depois vai em inspecionar, lá vai ter um nome "Toggle device toolbar". 7/03/2018 às 23:58
  • Sim estou usando este recurso Anderson mas tem outros navegadores que preciso testar tbm
    – sol25lua
    8/03/2018 às 0:44
  • Para o Chrome e acredito que o FireFox tb, tem vário plugins que ajudam a testar a responsividade. Vc pode dar uma olhada aqui, as vezes tem algo que te ajude chrome.google.com/webstore/search/Responsive%20
    – hugocsl
    8/03/2018 às 12:59

2 Respostas 2

2

Alguns navegadores (Chrome, Firefox e Opera, por exemplo) possuem recursos que simulam tamanho de tela para vários tipos de dispositivos.

Você pode abrir o devtools (ferramentas do desenvolvedor) nesses navegadores e escolher um dispositivo que queira visualizar sua página.

  • Chrome e Firefox: pressione F12
  • No Opera: pressione CTRL + Shift + i

Um exemplo no Chrome:

A abrir o devtools, você verá um ícone parecido com isso:

inserir a descrição da imagem aqui

Ao clicar no ícone, irá aparecer opções de dispositivos:

inserir a descrição da imagem aqui

Então você escolhe um para testar. Inclusive tem a opção "Responsive", onde você pode ir redimensionando a tela para ver o comportamento da página. Você pode também ativar outros dispositivos que estão desabilitados por padrão (como iPhone 4, super importante) ou criar dispositivos customizados de acordo com as dimensões de tela que você desejar testar.

Outro excelente recurso é o Throttling, onde você pode simular uma velocidade de conexão (inclusive uma conexão offline) para ver o comportamento da página em conexões mais lentas. Clique em "Edit":

inserir a descrição da imagem aqui

E clique em "Throttling":

inserir a descrição da imagem aqui

Claro que esses recursos do navegador desktop não irão simular 100% o comportamento de um dispositivo móvel. Alguns comportamentos são peculiares em dispositivos móveis. Por isso é bom também testar diretamente em dispositivos móveis que você tem disponível. Só que para isso seria necessário que seu dispositivo móvel tenha acesso ao seu servidor local.

3
  • Obrigada agora estou conseguindo efetuar os teste com essas informações que voce me passou. valeu
    – sol25lua
    8/03/2018 às 0:44
  • De nada! Esse recurso salvou a vida dos desenvolvedores. Imagina vc sem ter onde testar. No máximo teria que ficar redimensionando a janela do navegador, que seria péssimo. Faça bom proveito e sucesso nos seus projetos.
    – Sam
    8/03/2018 às 0:46
  • Verdade mesmo me salvou obrigada :)
    – sol25lua
    8/03/2018 às 0:47
1

Complementando, você pode usar o Android SDK, que pode ser instalado através do Android Studio, para simular a aplicação no Smartphone ou em uma máquina virtual. Isso pode levar muito tempo para baixar, mas é bem mais fiel, profissionalmente falando.

Você também pode configurar o roteamento da porta 80 no roteador para o IP do seu computador, assim você pode acessar todas suas aplicações LOCALHOST por qualquer computador ou smartphone dentro ou fora da seu local de trabalho, somente usando o seu IP seguido da pasta da aplicação. Parece complicado mas não leva mais que 5 minutos para isso, mas talvez você tenha que liberar o Firewall do Windows.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .