¿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 píxeles (el contenido de 676 píxeles y el resto se encuentra en la barra lateral). No quiero revolucionar el tema, pero creo que es demasiado grande para teléfonos de 320x480 y 800x480. Probablemente quitaré la barra lateral o al menos la moveré a la derecha y haré otros pequeños ajustes.

    
pregunta Drake 10.11.2010 - 14:23

6 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 sitios web, así que sé que no es la panacea de las soluciones móviles (corro mi cartera en WordPress y mi blog, y mi cartera se ve como **** en 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 mencionó Jan Fabry, hay una lista de agentes de usuarios de navegadores móviles. 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;
}

La carne del complemento, sin embargo, 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 gancho plugins_loaded para detectar el agente de usuario del navegador móvil y establece $applemobile en 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á usando un navegador móvil (de acuerdo con 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 $applemoble está configurado como verdadero o no. Si es así, WordPress utilizará 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, usted está anulando el comportamiento predeterminado de WordPress basado en si el navegador que se está utilizando tiene o no un agente de usuario que coincide con su lista de "navegadores móviles".

WPTouch también incluye la posibilidad 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 mientras crea su propia solución.

Disclaimer: Todo el código anterior se copió de la fuente de 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.

    
respondido por el EAMann 10.11.2010 - 16:40
8

Es posible que desee ver cómo el muy popular complemento WPtouch hace esto. Ofrece un tema diferente para los 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 , Esa es probablemente la clave.

Otro complemento, WP-Wurfled , utiliza el extenso Base de datos del archivo de recursos universales inalámbricos . Esta base de datos de dispositivos móviles, que se actualiza constantemente, también contiene una gran cantidad de información de capacidad , para que sepa la resolución de pantalla del servidor. dispositivo, ya sea compatible con Flash, ...

El template_redirect action hook se usa a menudo 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 enlace, pero eso es un filtro).

    
respondido por el Jan Fabry 10.11.2010 - 15:03
7

A riesgo de no responder la pregunta, le aconsejo 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 según el dispositivo utilizado (y, originalmente, la orientación de la pantalla).

En el momento de escribir esto, 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 distribuyen en dos columnas y las casillas de abajo se distribuyen en dos columnas debajo.) Puede reproducir el efecto utilizando Safari, reduciendo el ancho del navegador.

De todos modos, tan divertido como lo fue la programación, finalmente se me ocurrió que, al menos en dispositivos iOS, el diseño optimizado para dispositivos móviles empeoró las cosas, no mejoró. El zoom integrado de Safari mobile es tal que, siempre que su columna principal tenga un ancho de 480px, su sitio ya está optimizado para uso móvil. Agregue una barra lateral de 240px de ancho para un diseño de 720px, y su sitio se adapta y se ve muy bien en todos:

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

500px + 250px también funciona si prefieres tener algo que sume 750px, si tomas en cuenta el zoom integrado del móvil Safari. El sitio aún se verá bien y se podrá leer perfectamente en iPhones en modo horizontal y vertical.

En cualquier caso, volviendo a tu pregunta, las pruebas revelaron que lo único que NO debes 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 ampliar algo restringido en una columna de 480px de ancho, lo que permite un tamaño de texto más grande; algo que se "ajusta" al ancho de tu pantalla te obliga a leer un texto pequeño o un desplazamiento horizontal si es demasiado pequeño para leer cómodamente ...

    
respondido por el Denis de Bernardy 10.11.2010 - 17:02
3

Simple: utilice wp_is_mobile() para realizar la prueba. Se activará true para todos dispositivos móviles (teléfonos inteligentes, tabletas, etc.).

Actualizar

Por favor, no haga eso. No funciona de forma fiable.

    
respondido por el kaiser 26.03.2012 - 01:00
2

Este es un script realmente excelente si desea personalizarlo, fácil de integrar en wordpress. enlace

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

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

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

  • Quería agregar, una manera fácil de decir cuán importante es esto a través de los registros de su servidor.
respondido por el Wyck 10.11.2010 - 16:12
1

Añadiré un enfoque alternativo.

Tal vez desee realizar trabajos manuales y ajustar todo el estilo y el comportamiento de acuerdo con necesidades muy específicas.

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

La función que encontré 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";
    
respondido por el brasofilo 26.03.2012 - 05:59

Lea otras preguntas en las etiquetas