Cada navegador tem seu próprio seloGraças a isso, em nosso site poderemos identificar de onde vem uma solicitação e de qual navegador ela foi feita, como bem sabemos, o navegador Internet Explorer sempre trouxe dores de cabeça para os desenvolvedores web (embora nos últimos tempos tenha melhorado), pois poderemos identificá-lo e mostrar regras alternativas para resolver esses pequenos problemas.
Por nos servir?Imagine que temos um site como o Facebook, onde milhões de pessoas entram todos os dias, porém nem todas o fazem pelo mesmo tipo de dispositivo, há pessoas que entram de seu PC desktop, outras de um tablet, outras de seu celular, etc. Cada dispositivo possui um navegador (ou vários) e ele possui um agente, se pudermos identificá-lo então poderemos servir o conteúdo de forma adequada, já que a tela não é a mesma para todos, cada dispositivo será visto de uma forma, e cada navegador pode interpretar as regras de uma maneira diferente (embora isso esteja cada vez mais baixo).
Discutimos que cada navegador possui um agente que nos permite identificá-lo, segue abaixo um breve Código JavaScript para obter o agente do navegador onde é usado:
Obter user-agentO código do script foi incorporado ao HTML para sua conveniência. Se abrirmos o código anterior no navegador Google Chrome, veremos o seguinte:
PROLONGAR
E se agora fizermos isso no Internet Explorer:
PROLONGAR
Você verificou que ele foi aberto no Windows para fazer as 2 capturas anteriores; se o abrirmos no Mozilla Firefox no Linux, veremos o seguinte:
Se você quiser um código em um idioma para o servidor, abaixo está um código para ver como obter o agente em PHP, lembre-se de que o JavaScript pode ser desativado pelo usuário:
Passaremos agora ao que mais nos interessa, para isso começaremos por olhar um exemplo do que discutimos até agora em nossa página: Solvética.
Verificando o Solvético
Se entrarmos no Solvetic a partir do nosso PC, usando o navegador Google Chrome veremos o seguinte aspecto, completo, de relance vemos tudo amplo, área para fazer login e registrar:
Mas se entrarmos a partir do Google Chrome em um celular Android, nem todo o conteúdo entra na tela claro, é algo que tem que ser levado em consideração, não é muito agradável ter que deslizar o dedo para ver as partes do tela (poucos sites são assim hoje em dia, felizmente), abaixo deixo a imagem de como o Solvetic se parece no celular:
Como podemos ver, ele se adapta à tela, agora temos os menus na parte superior, se clicarmos no lado esquerdo (as 3 barras) veremos as opções para ir aos artigos, tutoriais, etc.
E se clicarmos no ícone à direita (aspecto do botão liga / desliga), temos as opções de login ou registro.
Agora vamos ver uma maneira de fazer com que uma página seja veiculada, dependendo do dispositivo que nos visita.
Como conseguir o resultado?
Existem várias maneiras de obter este resultado, existem scripts que são colocados diretamente no aplicativo ou também temos frameworks como o Bootstrap, mas também podemos obter um resultado semelhante a partir do Nginx, já que reconhecendo o agente do navegador podemos fazer uma reescrita e enviar ao usuário para outra parte do aplicativo sem alterar a URL que ele vê.
Se você deseja conhecer o Nginx, deixamos um link abaixo, onde você também pode baixá-lo:
Para isso devemos primeiro identificar o agente do navegador, se for um dos que queremos inserir a regra usamos uma condicional simples e aplicamos a regra a ela, fazemos tudo isso em nosso bloco de localização.
Vejamos o seguinte código de exemplo para conseguir isso, você pode ver como ele é curto:
localização / {if ($ http_user_agent ~ * '(iPhone | iPod)') {reescrever ^. + http://m.example.com/$uri; }}}Como podemos ver no código, identificamos o agente do navegador, se ele corresponder ao que designamos (neste caso iPhone ou iPod) fazemos uma reescrita, isso pode ser feito de forma ampla ou específica conforme nossa lógica exigir, para o Por exemplo, é mais fácil de entender com apenas uma condição.
Como podemos ver, é bastante fácil identificar o agente do navegador e é ainda mais fácil usá-lo a nosso favor, pois como mencionamos antes, devemos ter uma ideia clara do que queremos fazer para usar o ferramentas e obter o benefício desejado.
Para finalizar o tutorial, comente que usando design responsivo você conseguirá que a aparência de sua página web se adapte à tela dos dispositivos sem maiores complicações.
