Como detectar dispositivos móveis e apresentar a eles um tema específico?


31

Gostaria de criar uma nova versão modificada do meu tema (verifique meu perfil, se necessário) para apresentar aos visitantes se detectar que eles estão visitando o site em um dispositivo portátil, como iPhone, Android etc.

  1. Como detectar se a solicitação é proveniente de um dispositivo / navegador móvel?
  2. Como posso carregar e apresentar a eles um tema dedicado?

Mais informações : Meu tema não é fluido. Tem uma largura fixa de cerca de 976px (conteúdo de 676px + resto é barra lateral esquerda). Não quero revolucionar o tema, mas acho que é grande demais para os telefones 320x480 e 800x480. Provavelmente vou remover a barra lateral ou, pelo menos, movê-la para a direita e fazer outros pequenos ajustes.

Respostas:


19

Como a maioria dos outros, eu recomendo usar o WPTouch. No entanto, ele foi criado mais para oferecer suporte a blogs do que outros formatos de sites, então eu sei que não é a panacéia de soluções para dispositivos móveis (eu executo meu portfólio no WordPress e também no meu blog, e meu portfólio se parece com o ****WPTouch).

Analisei o código para encontrar as partes relevantes que você precisaria usar para replicar a detecção do navegador móvel. Em primeiro lugar, como mencionado por Jan Fabry, há uma lista de agentes de usuários de navegadores móveis. O WPTouch inclui uma lista padrão, mas também permite adicionar agentes de usuário personalizados com uma configuração ou um filtro chamado 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;
}

A carne do plugin, no entanto, é uma classe:

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

    ...

O construtor do plugin ( function WPtouchPlugin()) primeiro adiciona uma ação ao plugins_loadedgancho para detectar o agente do usuário do navegador móvel e definido $applemobilecomo true. Aqui está a função 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;
        }       
    }
}

Agora, o plug-in sabe que você está usando um navegador móvel (de acordo com o agente do usuário do navegador). A próxima parte do plugin é um 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 um desses filtros chama um método que verifica se está ou não $applemobledefinido como verdadeiro. Se for, o WordPress usará sua folha de estilo para celular, seu tema para celular e um modelo de postagem / página para celular, em vez dos padrões para o seu tema. Basicamente, você está substituindo o comportamento padrão do WordPress com base no fato de o navegador em uso ter ou não um agente de usuário que corresponda à sua lista de "navegadores móveis".

O WPTouch também inclui a capacidade de desativar o tema móvel - quando você visita um site WPTouch em um iPhone, há um botão na parte inferior que permite visualizar o site normalmente. Você pode considerar isso ao criar sua própria solução.

Isenção de responsabilidade: Todo o código acima foi copiado da fonte para o WPTouch versão 1.9.19.4 e está protegido pela GPL. Se você reutilizar o código, seu sistema também deverá estar em conformidade com os termos da GPL. Eu não escrevi esse código.


Essa é a lista padrão do UA? Não existe Opera Mini ou Opera Mobile? Estranho.
fuxia

Essa é a lista da UA diretamente do código-fonte ... lembre-se, porém, de que o WPTouch 2.0 é um plug-in premium que você precisa adquirir do BraveNewCode . Ainda não procurei na fonte, por isso pode ter uma lista de UA atualizada.
EAMann

8

Você pode querer ver como o popular plugin WPtouch faz isso. Ele fornece um tema diferente para "dispositivos móveis iPhone, iPod touch, Android, Opera Mini, Palm Pre, Samsung touch e BlackBerry Storm / Torch" . Eu vejo uma lista de agentes do usuário em seu código-fonte , essa é provavelmente a chave.

Outro plug - in, o WP-Wurfled , usa o extenso banco de dados do Wireless Universal Resource File . Esse banco de dados constantemente atualizado de dispositivos móveis também contém muitas informações de capacidade , para que você saiba do lado do servidor a resolução de tela do dispositivo, se ele suporta Flash, ...

O template_redirectgancho de ação é frequentemente usado para carregar temas personalizados, pois é quase o último momento antes da inclusão de um arquivo de modelo real ( template_includeé o último gancho, mas esse é um filtro).


7

Correndo o risco de não responder à pergunta, aconselho a não fazê-lo.

Uso dispositivos iOS há meses, e uma das primeiras coisas que fiz quando comprei meu iPad foi tentar criar um layout CSS que alterasse seu comportamento com base no dispositivo usado (e, originalmente, na orientação da tela )

No momento da redação deste artigo, ele está sendo executado no meu site de desenvolvimento (http://dev.semiologic.com/). Se você testá-lo em um dispositivo iOS, notará que o layout muda de uma coluna com barras laterais no iPad para uma com uma única coluna baseada no iPhone. (As barras laterais são dispostas em duas colunas e as caixas inferiores são dispostas em duas colunas embaixo.) Você pode reproduzir o efeito usando o Safari, reduzindo a largura do navegador.

De qualquer forma, por mais divertido que fosse programar, ocorreu-me que, pelo menos em dispositivos iOS, o layout otimizado para dispositivos móveis piorava as coisas, não melhorava. O zoom incorporado do Safari mobile é para que, contanto que sua coluna principal tenha 480 px de largura, seu site já esteja otimizado para uso móvel. Adicione uma barra lateral de 240px de largura para um layout de 720px de largura, e seu site se encaixa e fica ótimo em tudo:

  • 1024x768 (paisagem no iPad)
  • 768x1024 (retrato no iPad)
  • 800x600 (usuários com baixa visão)
  • 480 x 320 (paisagem do iPhone)
  • 320x480 (retrato do iPhone, com o zoom automático aumentando)

500px + 250px também funciona se você preferir algo que totalize 750px, se você levar em conta o zoom interno do Safari para celular. O site continuará com boa aparência e será perfeitamente legível nos iPhones nos modos paisagem e retrato.

De qualquer forma, voltando à sua pergunta, os testes revelaram que a única coisa que você NÃO deve fazer é usar um layout com uma largura flexível. (Aliás, o WP-touch fará exatamente isso, a menos que eu esteja enganado.) Fazer isso leva a um zoom abaixo do ideal. No iPad, você pode ampliar algo restrito em uma coluna de 480 pixels, permitindo um tamanho de texto maior; algo que "se ajusta" à largura da tela obriga a ler texto minúsculo ou rolagem horizontal se for muito pequeno para ler confortavelmente ...


Obrigado pelas sugestões. Meu site não é fluido, mas tem uma largura fixa de cerca de 976px (conteúdo de 676px + resto é barra lateral esquerda). Não quero revolucionar o tema, mas acho que ele deve ter largura para os telefones 320x480 e 800x480. Provavelmente removerei a barra lateral ou, pelo menos, moverei para a direita.
Drake

Concordo 100%, pelo que vi. Com muito poucas exceções, os "temas para celular" - no mínimo, os plugins "tema para celular" - são ruins e são mais difíceis de usar do que navegar no site original no celular. Embora se você se importa o suficiente para tentar criar uma versão para celular do seu site, pense nele como uma reformulação completa, em vez de apenas como um ajuste na folha de estilo.
goldenapples

3

Simples: use wp_is_mobile()para testar - ele será acionado truepara todos os dispositivos móveis (smartphones, tablets, etc.).

Atualizar

Por favor , não faça isso. Não funciona de forma confiável.


2

Este é realmente um ótimo script, se você quiser personalizá-lo, fácil de integrar ao wordpress. http://detectmobilebrowsers.mobi/

Uma coisa a notar é que a maioria dos usuários de iphone, andriod ou celulares com suporte nativo ao navegador não deseja ser redirecionada automaticamente!

Isso é uma prática ruim, dê a eles uma opção por meio de um link para uma versão móvel E, na versão móvel, dê a eles a opção de voltar ao site original.

Repito, não redirecione automaticamente seus usuários, a menos que esteja criando algo muito específico para dispositivos móveis, ou você tenha tráfego de telefones mais antigos sem suporte nativo ao navegador (improvável).

  • Queria adicionar, uma maneira fácil de dizer o quanto isso é importante através dos logs do servidor.

Boa observação para oferecer opções de chave nas duas versões. Às vezes, você está em um navegador não móvel, mas em uma conexão lenta (via modem celular, Wifi ruim, discagem, ...) e prefere uma versão otimizada para celular, porque é (em geral) também menor.
Jan Fabry

2

Vou adicionar uma abordagem alternativa.

Talvez você queira criar e ajustar todo o estilo e comportamento de acordo com necessidades muito específicas.

Recentemente, eu tive que: se uma coisa é IE9, se um iPhone é uma segunda, se um iPad é uma terceira e assim por diante ... E usei a classe Browser.php de Chris Schuld com ótimos resultados.

A função que eu vim e exemplos 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";
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.