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 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).fuente
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:
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 ...
fuente
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.
fuente
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).
fuente
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:
fuente