Dispositivos móveis hoje em dia são responsáveis por uma grande parte do tráfego da web. Muitas vezes precisamos adequar nossos sites para uma melhor experiência de usuário de acordo com o dispositivo que as pessoas utilizam.

Detecção de dispositivos móveis é uma prática muito normal no front-end, mas não tão comum quando falamos de programação back-end. Porém, com a ajuda do User-Agent string combinado à alguns cabeçalhos HTTP, é possível fazer a detecção do tipo de dispositivo.

Uma biblioteca capaz de detectar o tipo de dispositivo móvel em PHP é a serbanghita/Mobile-Detect, e com algumas poucas linhas de código, podemos validar o tipo de dispositivo, verificar o fabricante e até mesmo – às vezes – verificar a versão do dispositivo ou sistema operacional. Vamos ver como podemos usar essa biblioteca.

Primeiro, devemos criar uma pasta “mobile”:

composer require mobiledetect/mobiledetectlib

Depois criamos um arquivo mobile.php dentro da pasta criada:

<?php
require_once('vendor/autoload.php'); //realizando o autoload do composer;
$detect = new Mobile_Detect; //criando uma nova instância de Mobile_Detect
if ($detect->isMobile())  //se o dispositivo é um dispositivo móvel
{
	print 'Você está usando um dispositivo móvel <br/>'; //imprima "Você está utilizando um dispositivo móvel"
    if ($detect->is('iphone')) //se o dispositivo for um iPhone
    {
        print 'A versão do seu iPhone é: ' . $detect->version('iPhone'); //imprima "A versão do seu iPhone é: (versão)"
    }
    if ($detect->is('ipad')) //se o dispositivo for um iPad
    {
        print 'A versão do seu iPad é: ' . $detect->version('iPad'); //imprima "A versão do seu iPad é: (versão)"
    }
    if ($detect->is('android')) //se o dispositivo for um Android
    {
        print 'A versão do seu Android é: ' .  $detect->version('Android'); //imprima "A versão do seu Android é: (versão)"
    }
}
else //senão
{
    print 'Você não está usando um dispositivo móvel'; //imprima "Você não está utilizando um dispositivo móvel"
}

Detectando dispositivos móveis

Vamos fazer alguns testes do código acima. Vou utilizar o simulador de dispositivos móveis do Chrome.

Caso abra o arquivo no navegador normal:

Agora, vamos simular a navegação em um “iPhone 5”:

Depois, em um “iPhone X”:

Podemos simular também no iPad Pro:

E uma navegação utilizando um “Galaxy S5”:

Como é apenas uma simulação, no caso do Galaxy não foi detectado o tipo de dispositivo.

Dentro da biblioteca, você pode detectar os diversos tipos de dispositivos móveis. Verificar as versões e ajustar seu código de acordo com o tipo detectado. Para mais exemplos de código, você pode acessar a página de exemplos da biblioteca: https://github.com/serbanghita/Mobile-Detect/wiki/Code-examples

Espero que tenham gostado e até a próxima!