Usando bibliotecas de script do lado do servidor para reconhecimento de dispositivo refinado
A primeira etapa para conseguir isso é usar a análise de cadeia de caracteres do agente do usuário do lado do servidor para determinar o tipo de dispositivo do visitante.
A análise de strings de agente do usuário para servir uma interface personalizada é quase tão antiga quanto a própria Web. Nos últimos anos, tornou-se a principal técnica para fornecer versões “m-dot” de sites. A filosofia de design responsivo evita servir subdomínios separados para dispositivos móveis, mas a detecção tradicional de scripts do lado do servidor pode ser reaproveitada para renderizar o mesmo arquivo HTML de várias maneiras.
Há uma grande variedade de bibliotecas que facilitam a detecção de dispositivos do lado do servidor, mas poucas funcionam tão bem quanto o MobileESP , na minha opinião. O MobileESP está disponível em todas as principais linguagens de programação da Web e detecta o tipo de dispositivo e os recursos. Aqui está um exemplo de como nosso site usa a versão PHP do MobileESP para categorizar dispositivos e servir o CSS e JavaScript apropriado:
<?php // Cria algumas constantes para dispositivos class Device { const TABLET = 0; const TELEFONE = 1; const DESKTOP = 2; } // Inicializa o objeto MobileESP $uagent_info = new uagent_info(); // Define o dispositivo if($uagent_info->isTierTablet) { $device = Device::TABLET; } elseif($uagent_info->isIphone || $uagent_info->isAndroidPhone || $uagent_info->isTierRichCss) { $device = Device::PHONE; } else { $dispositivo = Dispositivo::DESKTOP; } ?> <html> <head> …
<!– Exiba o CSS e JavaScript apropriado para o dispositivo –> <?php switch($device) : ?> <?php case Device::TABLET: ?> <link rel=”stylesheet” type=”text /css” href=”style/tablet.css”/> <script type=”text/javascript” src=”js/tablet.js”></script> <?php break; ?> <?php case Device::PHONE: ?> <link rel=”stylesheet” type=”text/css” href=”style/phone.css”/> <script type=”text/javascript” src=” js/phone.js”></script> <?php break; ?> <?php default: ?> <link rel=”stylesheet” type=”text/css” href=”style/desktop.css”/> <script type=”text/javascript” src=”js/desktop. js”></script> <?php break; ?> <?php endswitch; ?> </head> … </html>
Consultas de mídia CSS versus manipulação de DOM
Embora as interfaces de desktop e telefone celular possam seguir regras de design mais tradicionais, o espaço do tablet tem um grau muito maior de variação e requer mais planejamento. Os tamanhos de tela do tablet geralmente variam entre 7 e 10 polegadas, enquanto os telefones geralmente ficam em torno de 4 polegadas. Portanto, as telas de retina em tablets têm um impacto maior na quantidade de pixels na tela.
Para nosso site, isso significa que a exibição de texto de coluna única nem sempre funciona para tablets e precisa ser alterada para a exibição de três colunas também usada na versão desktop do site.
Isso pode ser feito por meio de consultas de mídia CSS ou manipulação de JavaScript DOM.
Consulta de mídia CSS
O CSS3 permite o uso extensivo de condicionais com base nas características da tela do usuário (como largura e orientação). Aqui está um exemplo de uso de consultas de mídia para criar layouts responsivos:
@media screen e (min-width: [width]px) { .class { property: value; } } @media screen e (-webkit-min-device-pixel-ratio: 2) @media screen e (orientação: paisagem) @media screen e (device-aspect-ratio: 16/9)
Manipulação de DOM
No entanto, nosso site usa programação JavaScript DOM por meio de jQuery para alternar entre a visualização de coluna única e tripla.
Manipular o DOM permite controle completo e em tempo real sobre o layout de uma página da web. O JavaScript específico do tablet, fornecido pela análise do agente do usuário, contém código que altera o CSS de elementos div HTML preexistentes.
// Se a tela for larga o suficiente para querermos 3 colunas if($(window).width() >= 770) { // Cria o recuo $(“#front_items”).css( { ‘margin-top’: ‘-5px’, ‘margem-esquerda’: ’20px’ }); // Dimensiona as colunas var textWidth = ($(“#carousel”).width() – 70) / 3; $(“.front_column”).css( { ‘width’: textWidth + ‘px’, ‘margin-bottom’: ‘0’ }); } // Interface de uma coluna else { $(“#front_items”).css( { ‘margin-top’: ‘0’, ‘margin-left’: ‘0’ }); textWidth = $(“#carousel”).width() + 20; $(“.front_column”).css( { ‘width’: textWidth + ‘px’, ‘margin-bottom’: ‘5px’ }); }
Desvantagens do script do lado do servidor + manipulação do DOM
Embora essa técnica, na minha opinião, permita um controle muito maior sobre o design e a interatividade em comparação ao uso de consultas CSS3/media, ela tem suas desvantagens potenciais.
- Nenhum dispositivo ou detecção de navegador é perfeito. A melhor maneira de maximizar a detecção adequada de dispositivos é usar uma biblioteca atualizada regularmente como o MobileESP.
- Esta solução não funcionará totalmente se o usuário tiver desabilitado o JavaScript. Embora os excepcionalmente poucos usuários que têm o JavaScript desabilitado estejam acostumados com sites que não funcionam totalmente, usar apenas consultas de mídia CSS específicas do dispositivo é a melhor opção se você quiser manter alguns dos benefícios sem usar JavaScript.
- Essa solução requer a manutenção de arquivos CSS e JavaScript separados para cada dispositivo de destino, em oposição a um único arquivo CSS que as consultas de mídia podem pagar.
