Cómo probar el webkit para dispositivos móviles

Question

Estoy buscando construir un nuevo sitio web y quiero adoptar un enfoque responsable de "primero en el móvil". Uno de los principios de esta metodología es cargar solo lo que necesita y evitar incluir grandes bibliotecas y frameworks derrochadores hasta que realmente los necesite.

Para esto tengo la intención de usar modernizr2 para probar las características y luego cargar solo los archivos y bibliotecas necesarios.

En el lado javascript, estoy realmente interesado en usar algo como zepto.js (http://zeptojs.com/) que es una pequeña biblioteca de JavaScript (2-5k) optimizada para webkit móvil (y solo para web móvil) manteniendo un jquery compatible sintaxis. También ha sido diseñado para ser "hot-swappable" con jquery completo. Así que mi estrategia es (en pseudo-código):

• prueba para webkit móvil
• Si (verdadero) de carga Zepto.js
• si jQuery (falsa) de carga

Pero ahora mi La pregunta es: ¿qué técnica (prueba de futuro) recomendarían para detectar el webkit móvil, de preferencia en una forma javascript pura (sin usar jquery, plugins u otras bibliotecas) y que podría integrarse con modernizr's testing API?

Answer 1

Bien, así que supongo que mi pregunta estaba mal redactada o algo así, pero un poco investigando y encontré una solución aceptable que funciona con mi caso de uso.

// Webkit detection script 
Modernizr.addTest('webkit', function(){ 
return RegExp(" AppleWebKit/").test(navigator.userAgent); 
}); 

// Mobile Webkit 
Modernizr.addTest('mobile', function(){ 
return RegExp(" Mobile/").test(navigator.userAgent); 
}); 

Estas dos pruebas se sumarán tanto el 'webkit' y las clases 'móviles' a su etiqueta HTML (o 'no-webkit' y 'no-móvil' si es falso), pero también le permitirá condicionalmente carga su biblioteca javascript preferida, dependiendo de la situación.

En mi caso, ya sea cambiando entre jQuery o Zepto.js:

Modernizr.load([ 
      // test mobile webkit (zepto or jquery?) 
      { 
       test: Modernizr.webkit && Modernizr.mobile, 
       nope: ['//ajax.googleapis.com/ajax/libs/jquery/1/jquery.js'], 
       yep: [baseURL + 'js/lib/zepto.min.js'] 
      }]); 

Así que cuando detecto un usuario utiliza un navegador móvil en WebKit (que es, probablemente, al igual que el 100% de iOS o Android por ahí), Puedo ahorrarles una cantidad considerable de sobrecarga, y cargar JQuery normal para todos los demás, si es necesario. Como la sintaxis es muy similar, es probable que los complementos y otros scripts funcionen independientemente de qué marco termine cargándose.

Answer 2

La respuesta de gillesv es casi instantánea. Sin embargo, encontré que el Regex no detecta los navegadores Webkit en Android 2.2 & 2.3 (Froyo & Gingerbread). El userAgent contiene las frases 'AppleWebkit' y 'Móvil', pero no con una barra inclinada al final.

modificar el código de la siguiente manera funciona para mí:

// Webkit detection script 
Modernizr.addTest('webkit', function(){ 
    return RegExp(" AppleWebKit").test(navigator.userAgent); 
}); 

// Mobile Webkit 
Modernizr.addTest('mobile', function(){ 
    return RegExp(" Mobile").test(navigator.userAgent); 
});