Como detectar chamadas desde dispositivos móbiles en páxinas web

Redireccionar dispositivos móbiles a contidos ou debuxos móbiles

Desde fai anos, os expertos dixeron que o tráfico aos sitios web dos visitantes nos dispositivos móbiles está a aumentar dramaticamente. Por esta razón, moitas empresas comezaron a adoptar unha estratexia móbil para a súa presenza en liña, creando experiencias adaptadas para teléfonos e outros dispositivos móbiles.

Unha vez que pasou o tempo aprendendo a deseñar páxinas web para teléfonos móbiles e implementando a súa estratexia, tamén quererá asegurarse de que os visitantes do seu sitio poidan ver eses deseños. Hai moitos xeitos de facelo e algúns funcionan mellor que outros. Aquí tes unha ollada ao método que podes usar para implementar soporte móbil nos teus sitios web, xunto cunha recomendación próxima ao final para que o mellor método para lograr isto é na web de hoxe.

Proporciona unha ligazón a outra versión do sitio

Este é, de lonxe, o método máis sinxelo para xestionar usuarios de teléfonos móbiles. En vez de preocuparse se poden ou non poden ver as túas páxinas, basta con poñer unha ligazón nalgún lugar preto da parte superior da páxina que apunta a unha versión móbil do seu sitio. A continuación, os lectores poden auto-seleccionar se queren ver a versión móbil ou continuar coa versión "normal".

O beneficio desta solución é que é fácil de implementar. Esixe que crees unha versión optimizada para móbil e despois engada unha ligazón nalgún lugar preto da parte superior das páxinas do sitio normal.

Os inconvenientes son:

En definitiva, este enfoque é un anticuado que é improbable que sexa parte dunha estratexia móbil moderna. Ás veces úsase como unha solución de stop-gap mentres se está a desenvolver unha mellor solución, pero é realmente unha axuda de banda a curto pra neste momento.

Usar JavaScript

Nunha variación do enfoque anteriormente mencionado, algúns desenvolvedores utilizan algún tipo de script de detección do navegador para detectar se o cliente está nun dispositivo móbil e despois redirixilos a ese sitio móbil por separado. O problema coa detección do navegador e os dispositivos móbiles é que existen miles de dispositivos móbiles aí fóra. Para intentar detecta-los todo cun JavaScript pode converter todas as súas páxinas nun pesadelo de descarga e aínda está suxeito a moitos dos mesmos inconvenientes que o mencionado enfoque.

Use o handheld multimedia CSS

O comando CSS: a consola portátil @media parece que sería unha forma ideal de mostrar estilos CSS só para dispositivos portátiles, como teléfonos móbiles. Esta parece ser unha solución ideal para mostrar páxinas para dispositivos móbiles. Escribe unha páxina web e despois crea dúas follas de estilo. O primeiro para o tipo de "pantalla" tipo de estilos a súa páxina para monitores e pantallas de ordenador. O segundo para os estilos de "man" contén a páxina para dispositivos pequenos como os teléfonos móbiles. Soa doado, pero realmente non funciona na práctica.

A maior vantaxe deste método é que non tes que manter dúas versións do teu sitio web. Simplemente mantén o único, e a folla de estilo define como debería verse -que en realidade está achegándose á solución final que queremos.

Un problema con este método é que moitos teléfonos non soportan o tipo de medios de man: eles amosan as súas páxinas co tipo de medio de pantalla. E moitos teléfonos celulares máis antigos e portátiles non admiten CSS. Ao final, este método non é fiable e, polo tanto, raramente se usa para entregar versións móbiles dun sitio web.

Use PHP, JSP, ASP para detectar o axente de usuario

Esta é unha forma moito mellor de redirixir os usuarios móbiles a unha versión móbil do sitio web, porque non conta cun linguaxe de script ou CSS que o dispositivo móbil non usa. Pola contra, usa un idioma de servidor (PHP, ASP, JSP, ColdFusion, etc.) para mirar o axente de usuario e, a continuación, cambiar a solicitude HTTP para apuntar a unha páxina móbil se é un dispositivo móbil.

Un simple código PHP para facelo sería así:

stristr ($ ua, "Windows CE") ou
stristr ($ ua, "AvantGo") ou
stristr ($ ua, "Mazingo") ou
stristr ($ ua, "móbil") ou
stristr ($ ua, "T68") ou
stristr ($ ua, "Syncalot") ou
stristr ($ ua, "Blazer")) {
$ DEVICE_TYPE = "MOBILE";
}
se (isset ($ DEVICE_TYPE) e $ DEVICE_TYPE == "MOBILE") {
$ location = 'mobile / index.php';
cabeceira ('Localización:'. $ location);
saír;
}
?>

O problema aquí é que hai moitos e moitos outros axentes de usuarios potenciais que utilizan dispositivos móbiles. Este script capturar e redirixir moitos deles pero non todos de ningún xeito. E máis engádense todo o tempo.

Ademais, como ocorre coas outras solucións anteriores, terás que ter que manter un sitio móbil separado para estes lectores. Esta desventaja de ter que xestionar dous (ou máis!) Sitios web é motivo suficiente para buscar unha mellor solución.

Usa WURFL

Se aínda estás determinado a redirixir os seus usuarios móbiles a un sitio separado, WURFL (Ficheiro de recursos inalámbricos universal) é unha boa solución. Este é un ficheiro XML (e agora un ficheiro DB) e varias bibliotecas DBI que non só conteñen datos actualizados do axente de usuario sen fíos, senón tamén as características e capacidades que axustan os axentes de usuário.

Para usar WURFL, descarga o ficheiro de configuración XML e logo elixe o seu idioma e implementa a API no seu sitio web. Hai ferramentas para usar WURFL con Java, PHP, Perl, Ruby, Python, Net, XSLT e C ++.

O beneficio de usar WURFL é que hai moita xente actualizando e engadindo ao ficheiro de configuración todo o tempo. Entón, mentres o ficheiro que estás usando está desactualizado case antes de que termine de descargalo, as posibilidades son de que se a descargas unha vez ao mes, terás todos os navegadores móbiles que os teus lectores usan habitualmente sen ningún problemas. A desvantaxe, por suposto, é que ten que descargar e actualizar continuamente - todo para que poida dirixir os usuarios a un segundo sitio web e aos inconvenientes que crea.

A mellor solución é un deseño sensible

Así, se o mantemento de diferentes sitios para diferentes dispositivos non é a resposta, que é? Deseño web receptivo .

O deseño receptivo é onde se usan as consultas multimedia CSS para definir estilos para dispositivos de varios anchos. O deseño atractivo permítelle crear unha páxina web para usuarios tanto móbiles como non móbiles. A continuación, non se preocupe o contido que se mostrará no sitio web ou se non se lembra de transferir os últimos cambios no seu sitio para móbiles. Ademais, unha vez que tes escrito o CSS, non tes que descargar nada novo.

O deseño receptivo pode non funcionar perfectamente en dispositivos e navegadores moi antigos (a maioría dos cales son en moi pouco uso hoxe e non deberían ser unha gran preocupación para vostede), senón porque é aditivo (engadir estilos ao contido, en vez de ter contido afastado) estes lectores aínda poderán ler o seu sitio web, simplemente non se verá ideal no seu antigo dispositivo ou navegador.