Resultado de imagem para design responsivo pngHoje é dia é importante ter um site que se adapte em dispositivos móveis com telas menores. Sendo assim, você deverá desenvolver um website responsivo ou criar uma versão mobile apenas para rodar nestes dispositivos.  Nos exemplos abaixo, mostraremos 2 formas para identificar a tela ou o tamanho da janela do dispositivo utilizado, e assim, redireciona-lo para um endereço de uma página criada como uma versão mobile se o valor for menor que o especificado. 

Método A) Através da resolução da tela do dispositivo do usuário

<script>
if(screen.width < 720) {
   location.href='LINK DO SITE MOBILE'; //Aqui endereço para redirecionamento. 
}
</script>

Método B) Através do tamanho da janela que o usuário está utilizando

<script>
if (window.innerWidth < 810) {
   location.href='LINK DO SITE MOBILE'; //Aqui endereço para redirecionamento.
}
</script>

Observações:

1. A propriedade "width" conta a largura total da tela do dispositivo do usuário, em pixel. Mais sobre "screen.width" no Squids/W3 clicando aqui.

2. A propriedade "innerWidth"  conta os pixels na horizontal, desconsiderando a barra de rolagem, e retorna um inteiro. Mais sobre "innerWidth" no w3schools clicando aqui.

3. O valor de 810 pixels foi escolhido como um valor de segurança para desconsiderar o tamanho da barra e possíveis margens em seu site.

4. Para conhecer os principais tamanhos de tela, acesse o link: http://www.designinterativo.etc.br/design/resolucao-de-tela-de-smartphones-e-tablets 

5. A decisão condicional para o redirecionamento é feita no momento em que a página é carregada. Esse método não contempla mudanças após o carregamento.

JSN Epic template designed by JoomlaShine.com