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

Como la mayoría, recomiendo encarecidamente usar WPTouch. Sin embargo, está construido más para soportar blogs que otros formatos de sitios web, así que sé que no es la panacea de las soluciones móviles (yo manejo mi portafolio en WordPress así como mi blog, y mi portafolio se ve como **** en WPTouch).

Así que revisé el código para encontrar las partes relevantes que necesitarías usar para replicar la detección de navegadores móviles. Primero, como mencionó Jan Fabry, está una lista de agentes de usuario de navegadores móviles. WPTouch incluye una lista por defecto, pero también te 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",                                // iPhone de Apple
        "iPod",                                  // iPod touch de Apple
        "Android",                               // Android 1.5+
        "dream",                                 // Android anterior a 1.5
        "CUPCAKE",                               // Android 1.5+
        "blackberry9500",                        // Storm
        "blackberry9530",                        // Storm
        "blackberry9520",                        // Storm v2
        "blackberry9550",                        // Storm v2
        "blackberry9800",                        // Torch
        "webOS",                                 // Palm Pre Experimental
        "incognito",                             // Otro navegador para iPhone
        "webmate",                               // Otro navegador para iPhone
        "s8000",                                 // Navegador Samsung Dolphin
        "bada"                                   // Navegador Samsung Dolphin
    );

    $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 );

    // Filtro de Agente de Usuario de WPtouch
    $useragents = apply_filters( 'wptouch_user_agents', $useragents );

    return $useragents;
}

Sin embargo, el núcleo del plugin es una clase:

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

    ...

El constructor del plugin (function WPtouchPlugin()) primero agrega una acción al hook plugins_loaded para detectar el agente de usuario del navegador móvil y establecer $applemobile como 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 plugin sabe que estás usando un navegador móvil (según el agente de usuario del navegador). La siguiente parte importante del plugin 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 $applemoble está establecido como verdadero. Si es así, entonces WordPress usará tu hoja de estilos móvil, tu tema móvil y una plantilla móvil para entradas/páginas en lugar de las predeterminadas de tu tema. Básicamente, estás sobrescribiendo el comportamiento predeterminado de WordPress basado en si el navegador que se está usando tiene un agente de usuario que coincide con tu lista de "navegadores móviles".

WPTouch también incluye la capacidad de desactivar el tema móvil: cuando visitas un sitio con WPTouch en un iPhone, hay un botón en la parte inferior que te permite ver el sitio normalmente. Podrías considerar esto mientras construyes tu propia solución.

Descargo de responsabilidad: Todo el código anterior fue copiado del código fuente de WPTouch versión 1.9.19.4 y está protegido bajo la GPL. Si reutilizas el código, tu sistema también debe cumplir con los términos de la GPL. Yo no escribí este código.

Quizás quieras ver cómo el popular plugin WPtouch maneja esto. Ofrece un tema diferente para "dispositivos móviles iPhone, iPod touch, Android, Opera Mini, Palm Pre, Samsung touch y BlackBerry Storm/Torch". Veo una lista de agentes de usuario en su código fuente, probablemente esa sea la clave.

Otro plugin, WP-Wurfled, utiliza la extensa base de datos Wireless Universal Resource File. Esta base de datos constantemente actualizada de dispositivos móviles también contiene mucha información de capacidades, así puedes conocer del lado del servidor la resolución de pantalla del dispositivo, si soporta Flash, ...

El template_redirect hook de acción se usa frecuentemente para cargar temas personalizados, ya que es casi el último momento antes de que se incluya un archivo de plantilla real (template_include es el último hook, pero ese es un filtro).

A riesgo de no responder a la pregunta, te aconsejaría no hacerlo.

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 según el dispositivo utilizado (y, originalmente, la orientación de la pantalla).

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

De todos modos, tan divertido como fue programarlo, eventualmente me di cuenta de que, al menos en dispositivos iOS, el diseño optimizado para móviles empeoraba las cosas, no las mejoraba. El zoom incorporado de Safari móvil es tal que, siempre que tu columna principal tenga 480px de ancho, tu sitio ya está optimizado para uso móvil. Agrega una barra lateral de 240px de ancho para un diseño de 720px de ancho, y tu sitio se ajusta y se ve genial en todos:

• 1024x768 (iPad en horizontal)
• 768x1024 (iPad en vertical)
• 800x600 (usuarios con problemas de visión)
• 480x320 (iPhone en horizontal)
• 320x480 (iPhone en vertical, con el zoom automático activándose)

500px + 250px también funciona si prefieres algo que totalice 750px, teniendo en cuenta el zoom incorporado de Safari móvil. El sitio seguirá luciendo bien y será perfectamente legible en iPhones en ambos modos, horizontal y vertical.

En cualquier caso, volviendo a tu pregunta, las pruebas revelaron que la única cosa que NO debes hacer es usar 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, puedes hacer zoom en algo contenido en una columna de 480px de ancho, permitiendo un tamaño de texto más grande; algo que se "ajusta" al ancho de tu pantalla te obliga a leer texto diminuto, o a desplazarte horizontalmente si es demasiado pequeño para leer cómodamente...

Simple: Usa la función wp_is_mobile() para probar - devolverá true para todos los dispositivos móviles (teléfonos inteligentes, tablets, etc.).

Actualización

Por favor no hagas eso. No funciona de manera confiable.

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

Algo importante a tener en cuenta es que la mayoría de los usuarios de iPhone, Android o teléfonos móviles con navegadores nativos compatibles NO quieren ser redirigidos automáticamente.

Es una mala práctica, dales la opción mediante un enlace a una versión móvil Y en la versión móvil dales la opción de volver al sitio original.

Repito: no redirijas automáticamente a tus usuarios a menos que estés construyendo algo muy específico para móviles, o tengas tráfico de teléfonos antiguos sin soporte para navegadores nativos (poco probable).

• Quería añadir, una forma fácil de ver lo importante que es esto es a través de los registros de tu servidor.

Agregaré un enfoque alternativo.

Quizás quieras personalizar y ajustar manualmente todo el estilo y comportamiento según necesidades muy específicas.

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

La función que desarrollé 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 "Versión del navegador: " . browser_check('version');

if ( browser_check('ie') ) echo "Usando Internet Explorer - aplicar CSS adecuado";

if ( browser_check('mobile') ) echo "Usando iPhone, iPod o Android - cargar JAVASCRIPT apropiado";

if ( browser_check('ipad') ) echo "Usando iPad - ejecutar PHP específico";