¿Cómo detectar dispositivos móviles y presentarles un tema específico?


31

Me gustaría crear una nueva versión modificada de mi tema (verifique mi perfil si es necesario) para presentar a los visitantes si detecto que están visitando el sitio desde un dispositivo portátil, como iPhone, Android, etc.

  1. ¿Cómo detectar si la solicitud proviene de un dispositivo móvil / navegador?
  2. ¿Cómo puedo cargar y presentarles un tema dedicado?

Más información : Mi tema no es fluido. Tiene un ancho fijo de aproximadamente 976 px (676 px de contenido + resto es la barra lateral izquierda). No quiero revolucionar el tema, pero creo que es demasiado grande para teléfonos 320x480 y 800x480. Probablemente eliminaré la barra lateral o al menos la moveré a la derecha y haré otros pequeños ajustes.

Respuestas:


19

Como la mayoría de los demás, recomiendo usar WPTouch. Sin embargo, está construido más para admitir blogs que otros formatos de sitio web, por lo que sé que no es la panacea de las soluciones móviles (ejecuto mi cartera en WordPress y mi blog, y mi cartera se parece ****a WPTouch).

Así que eché un vistazo al código para encontrar las partes relevantes que necesitarías usar para replicar la detección del navegador móvil. En primer lugar, como lo menciona Jan Fabry, es una lista de agentes de usuario del navegador móvil. WPTouch incluye una lista predeterminada, pero también le permite agregar agentes de usuario personalizados con una configuración o con un filtro llamado wptouch_user_agents:

function bnc_wptouch_get_user_agents() {
    $useragents = array(           
        "iPhone",                                // Apple iPhone
        "iPod",                                  // Apple iPod touch
        "Android",                               // 1.5+ Android
        "dream",                                 // Pre 1.5 Android
        "CUPCAKE",                               // 1.5+ Android
        "blackberry9500",                        // Storm
        "blackberry9530",                        // Storm
        "blackberry9520",                        // Storm v2
        "blackberry9550",                        // Storm v2
        "blackberry9800",                        // Torch
        "webOS",                                 // Palm Pre Experimental
        "incognito",                             // Other iPhone browser
        "webmate",                               // Other iPhone browser
        "s8000",                                 // Samsung Dolphin browser
        "bada"                                   // Samsung Dolphin browser
    );

    $settings = bnc_wptouch_get_settings();
    if ( isset( $settings['custom-user-agents'] ) ) {
        foreach( $settings['custom-user-agents'] as $agent ) {
            if ( !strlen( $agent ) ) continue;

            $useragents[] = $agent; 
        }       
    }

    asort( $useragents );

    // WPtouch User Agent Filter
    $useragents = apply_filters( 'wptouch_user_agents', $useragents );

    return $useragents;
}

Sin embargo, la carne del complemento es una clase:

class WPtouchPlugin {
    var $applemobile;
    var $desired_view;
    var $output_started;
    var $prowl_output;
    var $prowl_success;

    ...

El constructor del complemento ( function WPtouchPlugin()) primero agrega una acción al plugins_loadedgancho para detectar el agente de usuario del navegador móvil y establecerlo $applemobileen verdadero. Aquí está la función específica:

function detectAppleMobile($query = '') {
    $container = $_SERVER['HTTP_USER_AGENT'];

    $this->applemobile = false;
    $useragents = bnc_wptouch_get_user_agents();
    $devfile =  compat_get_plugin_dir( 'wptouch' ) . '/include/developer.mode';
    foreach ( $useragents as $useragent ) {
        if ( preg_match( "#$useragent#i", $container ) || file_exists( $devfile ) ) {
            $this->applemobile = true;
        }       
    }
}

Ahora el complemento sabe que está utilizando un navegador móvil (según el agente de usuario del navegador). La siguiente parte carnosa del complemento es un conjunto de filtros:

if ( strpos( $_SERVER['REQUEST_URI'], '/wp-admin' ) === false ) {
    add_filter( 'stylesheet', array(&$this, 'get_stylesheet') );
    add_filter( 'theme_root', array(&$this, 'theme_root') );
    add_filter( 'theme_root_uri', array(&$this, 'theme_root_uri') );
    add_filter( 'template', array(&$this, 'get_template') );       
}

Cada uno de estos filtros llama a un método que verifica si $applemoblese establece o no en verdadero. Si es así, WordPress usará su hoja de estilo móvil, su tema móvil y una plantilla de publicación / página móvil en lugar de las predeterminadas para su tema. Básicamente, está anulando el comportamiento predeterminado de WordPress en función de si el navegador que se está utilizando tiene un agente de usuario que coincide con su lista de "navegadores móviles".

WPTouch también incluye la capacidad de desactivar el tema móvil: cuando visita un sitio WPTouch en un iPhone, hay un botón en la parte inferior que le permite ver el sitio normalmente. Es posible que desee considerar esto a medida que crea su propia solución.

Descargo de responsabilidad: todo el código anterior se copió de la fuente para WPTouch versión 1.9.19.4 y está protegido por la GPL. Si reutiliza el código, su sistema también debe cumplir con los términos de la GPL. No escribí este código.


¿Es esta la lista de UA predeterminada? ¿Sin Opera Mini u Opera Mobile? Extraño.
fuxia

Esa es la lista de UA directamente del código fuente ... solo recuerda, sin embargo, que WPTouch 2.0 es un complemento premium que debes comprar en BraveNewCode . Todavía no he visto la fuente para eso, por lo que podría tener una lista actualizada de AU.
EAMann

8

Es posible que desee ver cómo el popular plugin WPtouch hace esto. Da un tema diferente para "iPhone, iPod touch, Android, Opera Mini, Palm Pre, Samsung touch y dispositivos móviles BlackBerry Storm / Torch" . Veo una lista de agentes de usuario en su código fuente , esa es probablemente la clave.

Otro plugin, WP-Wurfled , utiliza la extensa base de datos de archivos de recursos universales inalámbricos . Esta base de datos de dispositivos móviles que se actualiza constantemente también contiene mucha información sobre la capacidad , para que conozca la resolución de pantalla del dispositivo, ya sea que sea compatible con Flash, ...

El template_redirectgancho de acción a menudo se usa para cargar temas personalizados, ya que es casi el último momento antes de que se incluya un archivo de plantilla real ( template_includees el último gancho, pero ese es un filtro).


7

A riesgo de no responder la pregunta, le aconsejaría que no lo haga.

He estado usando dispositivos iOS durante meses, y una de las primeras cosas que hice cuando compré mi iPad fue intentar crear un diseño CSS que cambiara su comportamiento en función del dispositivo utilizado (y, originalmente, la orientación de la pantalla )

Al momento de escribir, se está ejecutando en mi sitio de desarrollo (http://dev.semiologic.com/). Si lo prueba en un dispositivo iOS, notará que el diseño cambia de una columna con barras laterales en el iPad a una con una sola columna basada en el iPhone. (Las barras laterales se colocan en dos columnas y los cuadros inferiores se colocan en dos columnas debajo). Puede reproducir el efecto usando Safari, reduciendo el ancho del navegador.

De todos modos, tan divertido como fue programar, se me ocurrió que, al menos en dispositivos iOS, el diseño optimizado para dispositivos móviles empeoró las cosas, no mejoró. El zoom incorporado de Safari mobile es para que, siempre y cuando su columna principal tenga un ancho de 480 px, su sitio ya esté optimizado para uso móvil. Agregue una barra lateral de 240 píxeles de ancho para un diseño de 720 píxeles de ancho, y su sitio se ajusta y se ve muy bien en todos:

  • 1024x768 (paisaje iPad)
  • 768x1024 (retrato de iPad)
  • 800x600 (usuarios con mala vista)
  • 480x320 (iPhone paisaje)
  • 320x480 (retrato de iPhone, con el zoom automático activado)

500px + 250px también funciona si prefiere tener algo que sume 750px, si tiene en cuenta el zoom incorporado del móvil Safari. El sitio aún se verá bien y será perfectamente legible en iPhones tanto en modo horizontal como vertical.

En cualquier caso, volviendo a su pregunta, las pruebas revelaron que lo único que NO debe hacer es utilizar un diseño con un ancho flexible. (Por cierto, WP-touch hará exactamente eso a menos que me equivoque). Hacerlo lleva a un zoom subóptimo. En el iPad, puede acercar algo limitado en una columna de 480 px de ancho, lo que permite un tamaño de texto más grande; algo que se "ajusta" al ancho de su pantalla lo obliga a leer texto pequeño, o al desplazamiento horizontal si es demasiado pequeño para leer cómodamente ...


Gracias por las sugerencias Mi sitio no es fluido, pero tiene un ancho fijo de aproximadamente 976 px (676 px de contenido + resto es la barra lateral izquierda). No quiero revolucionar el tema, pero creo que es ancho para teléfonos 320x480 y 800x480. Probablemente eliminaré la barra lateral o al menos la moveré a la derecha.
Drake

Estoy de acuerdo al 100%, por lo que he visto. Con muy pocas excepciones, los "temas móviles", como mínimo, los complementos de "tema móvil", son una mierda y son más difíciles de usar que navegar por el sitio original en dispositivos móviles. Aunque si le importa lo suficiente como para intentar crear una versión móvil de su sitio, considérelo como un rediseño completo, en lugar de solo un ajuste de hoja de estilo.
goldenapples

3

Simple: use wp_is_mobile()para probar: se activará truepara todos los dispositivos móviles (teléfonos inteligentes, tabletas, etc.).

Actualizar

Por favor no hagas eso. No funciona confiable.


2

Este es un script realmente genial si desea personalizarlo, fácil de integrar en WordPress. http://detectmobilebrowsers.mobi/

Una cosa a tener en cuenta es que la mayoría de los usuarios de iphone, andriod o teléfonos móviles con soporte de navegador nativo no quieren ser redirigidos automáticamente.

Esta es una mala práctica, darles una opción a través de un enlace a una versión móvil Y en la versión móvil, darles la opción de volver al sitio original.

Repito, no redirija automáticamente a sus usuarios a menos que esté creando algo muy específico para dispositivos móviles, o tenga tráfico de teléfonos más antiguos sin soporte de navegador nativo (poco probable).

  • Quería agregar, una manera fácil de saber cuán importante es esto a través de los registros de su servidor.

Buena observación para ofrecer opciones de cambio en ambas versiones. A veces se encuentra en un navegador que no es móvil pero con una conexión lenta (a través de un módem celular, Wifi defectuoso, acceso telefónico, ...) y prefiere una versión optimizada para dispositivos móviles porque (en general) también es más pequeña.
Jan Fabry

2

Agregaré un enfoque alternativo.

Tal vez desee hacer artesanías y ajustar todo el estilo y el comportamiento de acuerdo con necesidades muy específicas.

Recientemente tuve que: si IE9 era una cosa, si iPhone era una segunda, si iPad era una tercera y así sucesivamente ... Y usé la clase Browser.php de Chris Schuld con excelentes resultados.

La función que se me ocurrió y ejemplos de uso:

require_once('Browser.php');
$browser_check = new Browser();
$browser_agent = $browser_check->getBrowser();
$browser_version = $browser_check->getVersion();

function browser_check($what) {
    global $browser_agent, $browser_version;
    switch ($what) {
        case 'version':
            return $browser_version;
        break;
        case 'ie':
            if ($browser_agent==Browser::BROWSER_IE) return true;
            else return false;
        break;
        case 'mobile':
            if ($browser_agent==Browser::BROWSER_ANDROID || $browser_agent==Browser::BROWSER_IPOD || $browser_agent==Browser::BROWSER_IPHONE) return true;
            else return false;          
        break;
        case 'ipad':
            if ($browser_agent==Browser::BROWSER_IPAD) return true;
            else return false;          
        break;
        default:
            return false;
        break;
    }
}

echo "Browser Version: " . browser_check('version');

if ( browser_check('ie') ) echo "Using Internet Explorer - print proper CSS";

if ( browser_check('mobile') ) echo "Using iPhone, iPod or Android - print proper JAVASCRIPT";

if ( browser_check('ipad') ) echo "Using iPad - print proper PHP";
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.