segunda-feira, 19 de março de 2018

Visual Dicas

Visual Dicas

Link to Visual Dicas

Como visualizar um site na versão mobile no PC (Google Chrome)

Posted: 18 Mar 2018 04:35 PM PDT

image

Veja o que seus leitores veem

Os aparelhos móveis tipo celulares, smartphones e tablets, estão sendo cada vez mais utilizados pelas pessoas do mundo inteiro. Mesmo com esta aceleração, grande parte dos sites ainda não tem sites adequados para esta tecnologia, pois não possuem boa visualização e muito menos boa navegação nos aparelhos móveis.

image

Portanto, é muito importante saber se seu blog ou site está adequado às versões mobile e a melhor forma para isto é visualizar seu site nestas versões.

Já mostramos aqui no Visual Dicas como visualizar seu site em um aparelho móvel (celular ou tablet). Entretanto, você precisava utilizar de recursos externos como um aplicativo ou um software.

Neste artigo vamos apresentar um maneira mais fácil e rápida, utilizando apenas os recursos para desenvolvedores disponíveis no Google Chrome e do Firefox.

Recurso desenvolvedor no Google Crome

1) Abra o navegador Google Chrome e acesse o seu site, ou qualquer site que deseja visualizar em versões mobile.

2) No navegador, clique no botão "Personalizar e controlar o Google Chrome" que aparece no canto direito da tela (ícone com 3 pontos)

image

3) Selecione [Mais ferramentas] e [Ferramentas do desenvolvedor], ou tecle simplesmente [ CTRL+Shift+I ]

image

4) Na nova janela que aparece à direita (ou abaixo, conforme configuração), clique no ícone de um celular.

image

5) Pronto, você entrou na versão mobile

image

6) Para visualizar em diversos tamanhos utilize o menu superior.

image

7) Se definido como Responsive, você poderá alterar os valores da largura ou altura da visualização.

image

8) Se preferir, escolha um dispositivo móvel como exemplo:

image

9) Para girar a imagem (como fazemos no smartphone) clique no ícone [rotate].

image

10) Para facilitar, você pode utilizar também as barras superiores que indicam tamanhos padrões para dispositivos móveis.

image

E o mais legal é que você pode navegar no site em um versão mobile para verificar a funcionalidade nos aparelhos móveis.

11) Para voltar a visualização normal no PC, clique de novo no ícone com um celular na janela à direita ou abaixo. Para fechar o recurso do desenvolvedor, clique no [ x ] que aparece no canto direito da janela.

image

byALF

Nenhum comentário:

Postar um comentário

Os comentários são muito bem vindos e importantes, pois enriquecem o conteúdo dos artigos.

Afilia-se na NetAffiliation

Ganhe dinheiro com os Programas de Afiliados