PHP Altruistas Ocio en Las Palmas
/

Cómo detectar la presencia de un móvil en un proyecto en PHP

Alguna vez necesitamos conocer si nuestro proyecto en web está siendo visitado por un dispositivo móvil. Además, también puede faltarnos identificar si acceden desde una Tablet o/y, además, si  el sistema es IOS o Android.

Este problema justo lo hemos tenido en el proyecto Vela & Vela relacionado con el mundo bursátil y que estamos llevando a cabo desde la plataforma Altruistas Org. Para resolverlo utilizamos una librería que hemos localizado en internet y cuya referencia dejamos aquí . Está basada en el uso de una clase que habrá de incluirse en nuestro desarrollo.

Descripción del problema


Deseamos insertar un gráfico interactivo del índice correspondiente al IBEX 35. Dentro de las posibilidades, optamos por el uso de un iframe que se ajusta perfectamente a las vistas desde ordenadores de sobremesa pero, para las vistas desde dispositivos móviles, es imposible adaptarnos a los anchos requeridos así que finalmente posicionamos una imagen determinada, que sustituya al gráfico, cuando el proyecto se visita desde un móvil.

Desarrollos de terceros utilizados

  1. Código del gráfico interactivo en formato HTML <iframe>
  2. Clase de PHP que mediante los métodos que proporciona identifica el dispositivo y el sistema operativo del dispositivo que visita la página.

En cuanto el gráfico lo obtenemos de INVESTING y obtenemos el siguiente código:

<iframe height="480" width="550" src="https://ssltvc.forexprostools.com/?pair_ID=174&height=480&width=550&interval=86400&plotStyle=area&domain_ID=4&lang_ID=4&timezone_ID=11"></iframe>

IBEX 35 Programacion Ocio Las Palmas Altruistas

La clase de PHP, anteriormente mencionada, la obtenemos del repositorio de Detección móvil.

La clase Mobile_Detect.php descargarda la ubicamos en un directorio que llamamos ‘includes’ dentro del raíz del proyecto. A partir de ahí, y siguiendo las recomendaciones del autor, incluimos la clase en nuestro software así como los métodos de detección de dispositivo.

Inclusión de la clase

[...]
</head>
<?php
   require_once ('includes/Mobile_Detect.php');
   $detect = newMobile_Detect(); //instancia
?>
<body>
[...]

Uso de los metodos

Los métodos que ofrecen son isMobile(), isTablet(), isiOS() E isAndroidOS() cuando se invocan a travéz de la instanciación $detect, devuelven un booleano que permiten informarnos del tipo de dispositivo que se conecta al servidor. La combinación de ellos a través de operadores lógicos deja abierta una ventana amplia al diseño de páginas web.

[...]
<section id="grafico">
<?php
 //detección de un móvil
      if ($detect->isMobile()==true && $detect->isTable()==false) {?>
         <img id="imagen" src="images/imagen-altruistas-vela-japonesa.png" alt="Grafica Vela&Vela">
<?php }else{ ?>
         <iframe height="480" width="550" src="https://ssltvc.forexprostools.com/?pair_ID=174&height=480&width=550&interval=86400&plotStyle=area&domain_ID=4&lang_ID=4&timezone_ID=11"></iframe>
<?php }
//-----Métodos no usado en el proyecto----
    /* if ($detect->isAndroidOS()) {
    // Si es Android
    } */
    /* if ($detect->isiOS()){
    //Si es iOS  
    } */
//---------------------
?>
</section>
[...]

Hemos utilizado dos métodos con el objeto únicamente de insertar la imagen si se trata de un dispositivo móvil, pero si se trata de una Tablet el comportamiento tendrá que ser como un ordenador de sobremesa, es decir, mostrando el gráfico interactivo del IBEX-35.

Vistas del resultado final


Vista desde un PC con el gráfico del IBEX-35

Vista Movil Vela a Vela Ocio Las Palmas Altruistas
Vista desde un dispositivo móvil con Gráfico

Deja una respuesta