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.
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).fonte
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:
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 ...
fonte
Simples: use
wp_is_mobile()para testar - ele será acionadotruepara todos os dispositivos móveis (smartphones, tablets, etc.).Atualizar
Por favor , não faça isso. Não funciona de forma confiável.
fonte
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).
fonte
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:
fonte