Skip to main content
adicionou 548 caracteres ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361

Não é necessário extensões ou plugins, navegadores baseados no Chromium possuem ferramentas avançadas pra simular dispositivos como smartphones e tablets.

Simular navegadores mobile

Navegue até o site de interesse e usando o Google Chrome aperte:

  • Ctrl + F12

Ou no Opera:

  • Ctrl + Shift + Ii

Irá aparecer as ferramentas de desenvolvedor:

Developer tools

Então clique no icone que parece um celular:

device mode

Ao clicar irá aparecer esta tela e ele irá entrar em modo de seleção e simulação de dispositivos (no meu caso o padrão está Iphone4):

developer tools chrome e opera

Depois clique no combo e troque pro modelo de celular desejado:

developer tools chrome e opera

Observe que existe uma tarja laranja e que o User-agentUser-agent muda (aonde está escrito UA), esta mensagem diz que alguns sites é necessário recarregar a página:

developer tools chrome e opera

Sendo um site não responsivo será necessário recarragarrecarregar a página com F5 e dependendo se houver cache use o Ctrl+F5 (que irá ignorar o cache pra aba especifica), veja como ficou o site pt.stackoverflow.com depois do F5:

developer tools chrome e opera

Existem alguns sites que usam Cookies ou localStorage pra salvar a página padrão que deve usar, mobile ou desktop, então nem o Ctrl+F5 irá funcionar, neste caso siga estes passos:

  1. Abra uma janela anonima (não abra nenhum site nela)
  2. Clique F12 se Chrome ou Ctrl+Shift+i se for Opera
  3. Então selecione o Device desejado
  4. A seguir cole na barra de endereços o site desejado.

Veja como ficou no modo anonimo:

Modo anonimo

Funções extras das ferramentas de desenvolvedor do Chrome e Opera

  • Simular conexões mais lentas:

    developer tools chrome e opera network

  • o Potrait troca a largura pela altura e vice-versa, ou seja simula a rotação e o ícone com o 2 ao troca o pixel ratio que simula telas com retina.

    developer tools chrome e opera

Não é necessário extensões ou plugins, navegadores baseados no Chromium possuem ferramentas avançadas pra simular dispositivos como smartphones e tablets.

Simular navegadores mobile

Navegue até o site de interesse e usando o Google Chrome aperte:

  • Ctrl + F12

Ou no Opera:

  • Ctrl + Shift + I

Irá aparecer as ferramentas de desenvolvedor:

Developer tools

Então clique no icone que parece um celular:

device mode

Ao clicar irá aparecer esta tela e ele irá entrar em modo de seleção e simulação de dispositivos (no meu caso o padrão está Iphone4):

developer tools chrome e opera

Depois clique no combo e troque pro modelo de celular desejado:

developer tools chrome e opera

Observe que existe uma tarja laranja e que o User-agent muda (aonde está escrito UA), esta mensagem diz que alguns sites é necessário recarregar a página:

developer tools chrome e opera

Sendo um site não responsivo será necessário recarragar a página com F5 e dependendo se houver cache use o Ctrl+F5 (que irá ignorar o cache pra aba especifica), veja como ficou o site pt.stackoverflow.com depois do F5:

developer tools chrome e opera

Existem alguns sites que usam Cookies pra salvar a página padrão que deve usar, mobile ou desktop, então nem o Ctrl+F5 irá funcionar, neste caso siga estes passos:

  1. Abra uma janela anonima (não abra nenhum site nela)
  2. Clique F12 se Chrome ou Ctrl+Shift+i se for Opera
  3. Então selecione o Device desejado
  4. A seguir cole na barra de endereços o site desejado.

Veja como ficou no modo anonimo:

Modo anonimo

Funções extras das ferramentas de desenvolvedor do Chrome e Opera

  • Simular conexões mais lentas:

    developer tools chrome e opera network

  • o Potrait troca a largura pela altura e vice-versa, ou seja simula a rotação e o ícone com o 2 ao troca o pixel ratio que simula telas com retina.

    developer tools chrome e opera

Não é necessário extensões ou plugins, navegadores baseados no Chromium possuem ferramentas avançadas pra simular dispositivos como smartphones e tablets.

Simular navegadores mobile

Navegue até o site de interesse e usando o Google Chrome aperte:

  • Ctrl + F12

Ou no Opera:

  • Ctrl + Shift + i

Irá aparecer as ferramentas de desenvolvedor:

Developer tools

Então clique no icone que parece um celular:

device mode

Ao clicar irá aparecer esta tela e ele irá entrar em modo de seleção e simulação de dispositivos (no meu caso o padrão está Iphone4):

developer tools chrome e opera

Depois clique no combo e troque pro modelo de celular desejado:

developer tools chrome e opera

Observe que existe uma tarja laranja e que o User-agent muda (aonde está escrito UA), esta mensagem diz que alguns sites é necessário recarregar a página:

developer tools chrome e opera

Sendo um site não responsivo será necessário recarregar a página com F5 e dependendo se houver cache use o Ctrl+F5 (que irá ignorar o cache pra aba especifica), veja como ficou o site pt.stackoverflow.com depois do F5:

developer tools chrome e opera

Existem alguns sites que usam Cookies ou localStorage pra salvar a página padrão que deve usar, mobile ou desktop, então nem o Ctrl+F5 irá funcionar, neste caso siga estes passos:

  1. Abra uma janela anonima (não abra nenhum site nela)
  2. Clique F12 se Chrome ou Ctrl+Shift+i se for Opera
  3. Então selecione o Device desejado
  4. A seguir cole na barra de endereços o site desejado.

Veja como ficou no modo anonimo:

Modo anonimo

Funções extras das ferramentas de desenvolvedor do Chrome e Opera

  • Simular conexões mais lentas:

    developer tools chrome e opera network

  • o Potrait troca a largura pela altura e vice-versa, ou seja simula a rotação e o ícone com o 2 ao troca o pixel ratio que simula telas com retina.

    developer tools chrome e opera

adicionou 548 caracteres ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361

Não é necessário extensõesextensões ou pluginsplugins, navegadores baseados no Chromium possuem ferramentas avançadas pra simular dispositivos como smartphones e tablets.

Simular navegadores mobile

Navegue até o site de interesse e usando o Google Chrome aperte:

  • Ctrl + F12

Ou no Opera:

  • Ctrl + Shift + I

Irá aparecer as ferramentas de desenvolvedor:

Developer tools

Então clique no icone que parece um celular:

device mode

Ao clicar irá aparecer esta tela e ele irá entrar em modo de seleção e simulação de dispositivos (no meu caso o padrão está Iphone4):

developer tools chrome e opera

Depois clique no combo e troque pro modelo de celular desejado:

developer tools chrome e opera

Observe que existe uma tarja laranja e que o User-agent muda (aonde está escrito UA), esta mensagem diz que alguns sites é necessário recarregar a página:

developer tools chrome e opera

Sendo um site não responsivo será necessário recarragar a página com F5 e dependendo se houver cache use o Ctrl+F5 (que irá ignorar o cache pra aba especifica), veja como ficou o site pt.stackoverflow.com depois do F5:

developer tools chrome e opera

Existem alguns sites que usam Cookies pra salvar a página padrão que deve usar, mobile ou desktop, então nem o Ctrl+F5 irá funcionar, neste caso siga estes passos:

  1. Abra uma janela anonima (não abra nenhum site nela)
  2. Clique F12 se Chrome ou Ctrl+Shift+i se for Opera
  3. Então selecione o Device desejado
  4. A seguir cole na barra de endereços o site desejado.

Veja como ficou no modo anonimo:

Modo anonimo

Funções extras das ferramentas de desenvolvedor do Chrome e Opera

  • Simular conexões mais lentas:

    developer tools chrome e opera network

  • o Potrait troca a largura pela altura e vice-versa, ou seja simula a rotação e o ícone com o 2 ao troca o pixel ratio que simula telas com retina.

    inserir a descrição da imagem aquideveloper tools chrome e opera

Não é necessário extensões ou plugins, navegadores baseados no Chromium possuem ferramentas avançadas pra simular dispositivos como smartphones e tablets.

Simular navegadores mobile

Navegue até o site de interesse e usando o Google Chrome aperte:

  • Ctrl + F12

Ou no Opera:

  • Ctrl + Shift + I

Irá aparecer as ferramentas de desenvolvedor:

Developer tools

Então clique no icone que parece um celular:

device mode

Ao clicar irá aparecer esta tela e ele irá entrar em modo de seleção e simulação de dispositivos (no meu caso o padrão está Iphone4):

developer tools chrome e opera

Depois clique no combo e troque pro modelo de celular desejado:

developer tools chrome e opera

Observe que existe uma tarja laranja e que o User-agent muda (aonde está escrito UA), esta mensagem diz que alguns sites é necessário recarregar a página:

developer tools chrome e opera

Sendo um site não responsivo será necessário recarragar a página com F5 e dependendo se houver cache use o Ctrl+F5 (que irá ignorar o cache pra aba especifica), veja como ficou o site pt.stackoverflow.com depois do F5:

developer tools chrome e opera

Funções extras das ferramentas de desenvolvedor do Chrome e Opera

  • Simular conexões mais lentas:

    developer tools chrome e opera network

  • o Potrait troca a largura pela altura e vice-versa, ou seja simula a rotação e o ícone com o 2 ao troca o pixel ratio que simula telas com retina.

    inserir a descrição da imagem aqui

Não é necessário extensões ou plugins, navegadores baseados no Chromium possuem ferramentas avançadas pra simular dispositivos como smartphones e tablets.

Simular navegadores mobile

Navegue até o site de interesse e usando o Google Chrome aperte:

  • Ctrl + F12

Ou no Opera:

  • Ctrl + Shift + I

Irá aparecer as ferramentas de desenvolvedor:

Developer tools

Então clique no icone que parece um celular:

device mode

Ao clicar irá aparecer esta tela e ele irá entrar em modo de seleção e simulação de dispositivos (no meu caso o padrão está Iphone4):

developer tools chrome e opera

Depois clique no combo e troque pro modelo de celular desejado:

developer tools chrome e opera

Observe que existe uma tarja laranja e que o User-agent muda (aonde está escrito UA), esta mensagem diz que alguns sites é necessário recarregar a página:

developer tools chrome e opera

Sendo um site não responsivo será necessário recarragar a página com F5 e dependendo se houver cache use o Ctrl+F5 (que irá ignorar o cache pra aba especifica), veja como ficou o site pt.stackoverflow.com depois do F5:

developer tools chrome e opera

Existem alguns sites que usam Cookies pra salvar a página padrão que deve usar, mobile ou desktop, então nem o Ctrl+F5 irá funcionar, neste caso siga estes passos:

  1. Abra uma janela anonima (não abra nenhum site nela)
  2. Clique F12 se Chrome ou Ctrl+Shift+i se for Opera
  3. Então selecione o Device desejado
  4. A seguir cole na barra de endereços o site desejado.

Veja como ficou no modo anonimo:

Modo anonimo

Funções extras das ferramentas de desenvolvedor do Chrome e Opera

  • Simular conexões mais lentas:

    developer tools chrome e opera network

  • o Potrait troca a largura pela altura e vice-versa, ou seja simula a rotação e o ícone com o 2 ao troca o pixel ratio que simula telas com retina.

    developer tools chrome e opera

adicionou 574 caracteres ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361

Não é necessário extensões ou plugins, navegadores baseados no Chromium possuem ferramentas avançadas pra simular dispositivos como smartphones e tablets.

Simular navegadores mobile

Navegue até o site de interesse e usando o Google Chrome aperte:

  • Ctrl + F12

Ou no Opera:

  • Ctrl + Shift + I

Irá aparecer as ferramentas de desenvolvedor:

Developer tools

Então clique no icone que parece um celular:

device mode

Ao clicar irá aparecer esta tela e ele irá entrar em modo de seleção e simulação de dispositivos (no meu caso o padrão está Iphone4):

inserir a descrição da imagem aquideveloper tools chrome e opera

Depois clique no combo e troque pro modelo de celular desejado:

inserir a descrição da imagem aquideveloper tools chrome e opera

Observe que existe uma tarja laranja e que o User-agent muda (aonde está escrito UAUA), esta mensagem diz que alguns sites é necessário recarregar a página:

inserir a descrição da imagem aquideveloper tools chrome e opera

Sendo um site não responsivo será necessário recarragar a página com F5 e dependendo se houver cache use o Ctrl+F5 (que irá ignorar o cache pra aba especifica), veja como ficou o site pt.stackoverflow.com depois do F5F5:

inserir a descrição da imagem aquideveloper tools chrome e opera

Funções extras das ferramentas de desenvolvedor do Chrome e Opera

  • Simular conexões mais lentas:

    developer tools chrome e opera network

  • o Potrait troca a largura pela altura e vice-versa, ou seja simula a rotação e o ícone com o 2 ao troca o pixel ratio que simula telas com retina.

    inserir a descrição da imagem aqui

Navegue até o site de interesse e usando o Google Chrome aperte:

  • Ctrl + F12

Ou no Opera:

  • Ctrl + Shift + I

Irá aparecer as ferramentas de desenvolvedor:

Developer tools

Então clique no icone que parece um celular:

device mode

Ao clicar irá aparecer esta tela e ele irá entrar em modo de seleção e simulação de dispositivos (no meu caso o padrão está Iphone4):

inserir a descrição da imagem aqui

Depois clique no combo e troque pro modelo de celular desejado:

inserir a descrição da imagem aqui

Observe que existe uma tarja laranja e que o User-agent muda (aonde está escrito UA), esta mensagem diz que alguns sites é necessário recarregar a página:

inserir a descrição da imagem aqui

Sendo um site não responsivo será necessário recarragar a página com F5 e dependendo se houver cache use o Ctrl+F5 (que irá ignorar o cache pra aba especifica), veja como ficou o site pt.stackoverflow.com depois do F5:

inserir a descrição da imagem aqui

Não é necessário extensões ou plugins, navegadores baseados no Chromium possuem ferramentas avançadas pra simular dispositivos como smartphones e tablets.

Simular navegadores mobile

Navegue até o site de interesse e usando o Google Chrome aperte:

  • Ctrl + F12

Ou no Opera:

  • Ctrl + Shift + I

Irá aparecer as ferramentas de desenvolvedor:

Developer tools

Então clique no icone que parece um celular:

device mode

Ao clicar irá aparecer esta tela e ele irá entrar em modo de seleção e simulação de dispositivos (no meu caso o padrão está Iphone4):

developer tools chrome e opera

Depois clique no combo e troque pro modelo de celular desejado:

developer tools chrome e opera

Observe que existe uma tarja laranja e que o User-agent muda (aonde está escrito UA), esta mensagem diz que alguns sites é necessário recarregar a página:

developer tools chrome e opera

Sendo um site não responsivo será necessário recarragar a página com F5 e dependendo se houver cache use o Ctrl+F5 (que irá ignorar o cache pra aba especifica), veja como ficou o site pt.stackoverflow.com depois do F5:

developer tools chrome e opera

Funções extras das ferramentas de desenvolvedor do Chrome e Opera

  • Simular conexões mais lentas:

    developer tools chrome e opera network

  • o Potrait troca a largura pela altura e vice-versa, ou seja simula a rotação e o ícone com o 2 ao troca o pixel ratio que simula telas com retina.

    inserir a descrição da imagem aqui

Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361
Carregando