javascript - style - w3schools table title




Detecta iPad Mini en HTML5 (16)

El iPad Mini de Apple es un clon más pequeño del iPad 2 en más formas de las que quisiéramos. En JavaScript, el objeto window.navigator expone los mismos valores para el Mini y el iPad 2. Hasta ahora, mis pruebas para detectar la diferencia no han llevado al éxito.

¿Porque es esto importante?

Como las pantallas del iPad Mini y el iPad 2 son idénticas en píxeles pero varían en tamaño real (pulgadas / centímetros), varían en PPI (píxeles por pulgada).

Para que las aplicaciones web y los juegos ofrezcan una interfaz de usuario amigable, ciertos elementos se ajustan en tamaño en relación con la posición del pulgar o el dedo del usuario, por lo tanto, es posible que desee escalar ciertas imágenes o botones para brindar una mejor experiencia al usuario.

Cosas que he probado hasta ahora (incluyendo algunos enfoques bastante obvios):

  • window.devicepixelratio
  • Ancho del elemento CSS en cm unidad
  • Consultas de medios CSS (como resolution y -webkit-device-pixel-ratio )
  • Dibujos SVG en unidades similares.
  • Haciendo todo tipo de transformaciones de webkit CSS durante un tiempo establecido y contando marcos renderizados con requestAnimFrame (esperaba detectar una diferencia mensurable)

Estoy sin ideas. ¿Qué hay de tí?

Actualización Gracias por las respuestas hasta ahora. Me gustaría comentar sobre las personas que votan en contra de la detección de iPad mini versus 2, ya que Apple tiene uhm, una guía para dominarlos a todos. Bien, aquí está mi razonamiento por el que siento que realmente tiene sentido en el mundo saber si una persona está usando un iPad mini o un 2. Y hacer con mi razonamiento lo que te gusta.

El iPad mini no es solo un dispositivo mucho más pequeño (9.7 pulgadas frente a 7.9 pulgadas), sino que su factor de forma permite un uso diferente. El iPad 2 generalmente se sostiene con las dos manos cuando juegas a menos que seas Chuck Norris . El mini es más pequeño, pero también es mucho más liviano y permite un juego donde lo sostienes con una mano y usas otro para deslizar o tocar o lo que sea. Como diseñador y desarrollador de juegos, me gustaría saber si es un mini para poder proporcionarle al jugador un esquema de control diferente si lo deseo (por ejemplo, después de las pruebas A / B con un grupo de jugadores).

¿Por qué? Bueno, es un hecho comprobado que la mayoría de los usuarios tienden a usar la configuración predeterminada, por lo que debe dejar de lado un mando de control virtual y poner algún otro control basado en el toque en la pantalla (solo dando un ejemplo arbitrario aquí) cuando el jugador carga el El juego por primera vez es lo que a mí, y probablemente a otros diseñadores de juegos, les encantaría poder hacer.

Así que, en mi humilde opinión, esto va más allá de las discusiones sobre directrices y dedos gruesos, y es algo que Apple y todos los demás proveedores deberían hacer: permitirnos identificar de forma única su dispositivo y pensar de manera diferente en lugar de seguir las pautas.


¿Qué pasa con un micro benchmark? Calcule algo que demore aproximadamente X microsegundos en iPad 2 y Y seg en iPad mini.

Probablemente no sea lo suficientemente preciso, pero podría haber alguna instrucción en la que el chip del iPad mini sea más eficiente.


Bueno, el iPad 2 y el iPad Mini tienen baterías de diferentes tamaños.

Si iOS 6 lo admite, puedes obtener el nivel de batería actual desde 0.0..1.0 usando window.navigator.webkitBattery.level . En algún nivel, ya sea en hardware o software, que probablemente se calcula como CurrentLevel / TotalLevel , donde ambos son ints. Si es así, esto resultará en un flotador que es un múltiplo de 1 / TotalLevel . Si toma muchas lecturas de nivel de batería de ambos dispositivos, y calcula battery.level * n , podría encontrar un valor de n donde todos los resultados comiencen a estar cerca de los enteros, lo que le proporcionará iPad2TotalLevel y iPadMiniTotalLevel .

Si esos dos números son diferentes y se battery.level * iPad2TotalLevel mutuamente, en producción puede calcular battery.level * iPad2TotalLevel y battery.level * iPadMiniTotalLevel . El que esté más cerca de un entero indicará qué dispositivo se está utilizando.

Lo siento por el número de ifs en esta respuesta! Esperemos que algo mejor venga.


Entiendo que esto podría ser una solución de baja tecnología, pero como parece que todavía no podemos encontrar nada más ...

Supongo que ya verificaste la mayoría de los otros dispositivos, por lo que veo los siguientes escenarios posibles.

Puede buscar TODOS los dispositivos más populares posibles que requieren CSS / tamaño especial, y si no coincide con ninguno de ellos, ¿asume que es un iPad mini o simplemente pregunta al usuario?

// Device checks here
...
else {
  // it would probably be better to make this a nicer popup-thing
  var mini = prompt("Are you using a iPad mini? Press yes for a better user experience");
  // Store the result for future visits somehow.
}

Sé que puede parecer un enfoque estúpido en este momento, pero si actualmente no tenemos forma de decidir si el dispositivo es un iPad mini o un iPad 2, al menos el sitio web se podrá usar con dispositivos iPad mini que hagan algo como esto.

Incluso podrías ir con algo como esto:

"Para brindarle la mejor experiencia de navegación posible, intentamos detectar su tipo de dispositivo para personalizar el sitio web para su dispositivo. Desafortunadamente, debido a las limitaciones, esto no siempre es posible y actualmente no podemos determinar si utiliza un iPad 2 o un iPad. Mini utilizando estos métodos.

Para obtener la mejor experiencia de navegación posible, seleccione a continuación el dispositivo que está utilizando.

Esta opción se almacenará para futuras visitas al sitio web en este dispositivo.

[] iPad 2 
[*] iPad mini
[] Ancient blackberry device

"

No estoy completamente familiarizado con lo que puede y no puede hacer del lado del cliente en Javascript. Sé que puede obtener la IP de un usuario, pero ¿es posible obtener la dirección mac de un usuario? ¿Son esos rangos diferentes entre iPad2 y iPad mini?


Este es un tiro salvaje, pero una de las diferencias entre iPad 2 y iPad mini es que el primero no tiene un giroscopio de 3 ejes. Tal vez sea posible utilizar la API de orientación para dispositivos WebKit para ver qué tipo de información puede obtener de ella.

Por ejemplo, esta página parece sugerir que solo puede obtener el valor rotationRate si el dispositivo tiene un giroscopio.

Lo siento, no puedo dar un POC que funcione, no tengo acceso a un iPad mini. Tal vez alguien que sepa un poco más acerca de estas API de orientación pueda participar aquí.


Esto no es una respuesta a tu pregunta tal como se plantea, pero espero que sea más útil que decir "no hagas eso":

En lugar de detectar el iPad Mini, ¿por qué no detectar que un usuario está teniendo dificultades para tocar el control (o: está golpeando constantemente en una subregión del control), y aumentar / reducir el tamaño del control para acomodarlo?

Los usuarios que necesitan controles más grandes los obtienen independientemente del hardware; los usuarios que no necesitan controles más grandes y desean ver más contenido también lo obtienen. No es tan simple como detectar el hardware, y habrá algunas cosas sutiles para corregir, pero si se hace con cuidado, podría ser realmente bueno.


No respondiendo a la pregunta, pero la pregunta detrás de la pregunta:

Tu objetivo es mejorar la experiencia del usuario en una pantalla más pequeña. La apariencia de los controles de la interfaz de usuario es una parte de ella. Otra parte de UX es la forma en que responde la aplicación.

¿Qué sucede si hace que el área que responde a los toques sea lo suficientemente grande como para que sea fácil de usar en el iPad Mini mientras mantiene la representación visual de los controles de la interfaz de usuario lo suficientemente pequeña como para ser visualmente agradable en el iPad?

Si ha reunido suficientes toques que no estaban en el área visual, puede decidir escalar visualmente los controles de la interfaz de usuario.

Como beneficio adicional, esto también funciona para grandes manos en iPad.


Reproduzca un archivo de audio estéreo y compare la respuesta del acelerómetro cuando el volumen sea alto en el canal derecho y en el canal izquierdo: el iPad2 tenía altavoces mono, mientras que el iPad Mini tiene altavoces estéreo incorporados.

¿Necesitas tu ayuda para recopilar los datos? Visita esta página y ayúdame a recopilar datos para esta idea loca. No tengo un iPad mini, así que realmente necesito tu ayuda.


Sé que es una solución horrible, pero en este momento la única forma de diferenciar entre un iPad Mini y un iPad 2 es verificar su número de versión y asignar cada número de versión con el dispositivo relacionado.

Permítame darle un ejemplo: iPad mini, versión 6.0, está exponiendo " 10A406 " como número de compilación, mientras que iPad 2 está exponiendo " 10A5376e ".

Este valor se puede obtener fácilmente a través de una expresión regular en el agente de usuario ( window.navigator.userAgent ); ese número tiene el prefijo " Mobile/ ".

Desafortunadamente, esta es la única forma inequívoca de detectar un iPad Mini; Yo sugeriría adoptar un enfoque relacionado con la viewport (donde sea compatible, utilizando unidades vh / vw) para mostrar correctamente los contenidos en diferentes tamaños de pantalla.


Siempre puedes preguntar al usuario ?!

Si el usuario no puede ver los botones o el contenido, entonces déles una forma de administrar la escala ellos mismos. Siempre se podrían incluir algunos botones de escala en el sitio para aumentar o reducir el contenido (texto / botones). Se garantizaría (casi) que esto funcionaría para cualquier resolución actual de iPad y probablemente cualquier resolución futura que Apple decida realizar.


Solicite a todos los usuarios con el agente de usuario de iPad2 que proporcionen una fotografía con la cámara incorporada y detecten la resolución con la API de archivos HTML . Las fotos del iPad Mini tendrán una mayor resolución debido a las mejoras en la cámara.

También puedes jugar creando un elemento de lienzo invisible y convertirlo a PNG / JPG utilizando la API de Canvas. No tengo ninguna forma de probarlo, pero los bits resultantes pueden ser diferentes debido al algoritmo de compresión subyacente y la densidad de píxeles del dispositivo.


Actualización: parece que estos valores informan el ancho y el alto de la ventana gráfica en el momento de la creación de la pestaña, y no cambian con la rotación, por lo que este método no se puede usar para la detección de dispositivos .

Puede usar screen.availWidth o screen.availHeight ya que parecen ser diferentes para iPad Mini y iPad 2.

Ipad mini

screen.availWidth = 768
screen.availHeight = 1004

Ipad 2

screen.availWidth = 748
screen.availHeight = 1024

Fuente: konstruktors.com/blog/web-design/…


EDITAR 1: Mi respuesta original, a continuación, fue "no hacerlo". En aras de ser positivo:

La verdadera pregunta, creo, no tiene nada que ver con el iPad X vs. iPad mini. Creo que se trata de optimizar las dimensiones de los elementos de la interfaz de usuario y la ubicación para la ergonomía del usuario. Debe determinar el tamaño de los dedos del usuario para controlar el tamaño de su elemento de la interfaz de usuario y, quizás, el posicionamiento. Esto, nuevamente, es y probablemente debería llegar sin necesidad de saber realmente en qué dispositivo se está ejecutando. Exageremos: su aplicación se ejecuta en una pantalla diagonal de 40 pulgadas. No sé la marca y el modelo o el DPI. ¿Cómo dimensionas los controles?

Debe mostrar un botón que sea el elemento de activación en el sitio / juego. Dejaré que usted decida dónde o cómo tiene sentido hacer esto.

Si bien el usuario verá esto como un solo botón, en realidad estará compuesto por una matriz de pequeños botones apretados que se cubren visualmente para aparecer como una imagen de un solo botón. Imagine un botón de 100 x 100 píxeles compuesto por 400 botones, cada uno de 5 x 5 píxeles. Debe experimentar para ver qué tiene sentido aquí y cuán pequeño debe ser su muestreo.

Posible CSS para la matriz de botones:

.sense_row {
  width:100px;
  height:5px;
  margin:0;
  padding:0;
}

.sense_button {
  float:left;
  width:3px;
  height:3px;
  padding:0px;
  margin:0px;
  background-color:#FF0;
  border:1px solid #000;
} 

Y la matriz resultante:

Cuando el usuario toque la matriz de botones, efectivamente obtendrá una imagen del área de contacto del dedo del usuario. Luego puede usar los criterios que desee (probablemente derivados empíricamente) para llegar a un conjunto de números que puede usar para escalar y posicionar los diversos elementos de la interfaz de usuario según sus requisitos.

La belleza de este enfoque es que ya no le importa qué nombre o modelo de dispositivo podría estar tratando. Todo lo que te importa es el tamaño del dedo del usuario en relación con el dispositivo.

Me imagino que este botón sense_array podría estar oculto como parte del proceso de entrada en la aplicación. Por ejemplo, si se trata de un juego, tal vez haya un botón "Jugar" o varios botones con los nombres de los usuarios o un medio para seleccionar el nivel en el que jugarán, etc. Tienes la idea. El botón sense_array podría vivir en cualquier lugar que el usuario tenga que tocar para ingresar al juego.

EDIT 2: solo teniendo en cuenta que probablemente no necesite tantos botones de detección. Un conjunto de círculos concéntricos o botones dispuestos como un gran asterisco * podría funcionar bien. Tienes que experimentar.

Con mi vieja respuesta, a continuación, les doy ambos lados de la moneda.

ANTIGUA RESPUESTA:

La respuesta correcta es: no hagas esto. Es una mala idea.

Si sus botones son tan pequeños que se vuelven inutilizables en un mini, necesita hacerlos más grandes.

Si he aprendido algo sobre cómo hacer aplicaciones iOS nativas, es porque tratar de ser más astuto que Apple es una fórmula para el dolor y la agravación indebidos. Si eligieron no permitirte identificar el dispositivo, es porque, bueno, en su caja de arena, no deberías.

Me pregunto, ¿estás ajustando el tamaño / ubicación en vertical vs. horizontal?


Basándome en la pregunta de Douglas sobre new webkitAudioContext().destination.numberOfChannelsel iPad 2, decidí realizar algunas pruebas.

Comprobando numberOfChannels regresó 2en iPad mini pero nada en iPad 2 con iOS 5 y 2también con iOS 6.

Entonces intenté verificar si webkitAudioContext está disponible

var hasWebkitAudio = typeof(webkitAudioContext) === "object";
alert(hasWebkitAudio);​

Lo mismo aquí, iPad Mini y iPad 2 con iOS 6 devuelven verdadero mientras que iPad 2 con iOS 5 devuelve falso.

(Esta prueba no funciona en el escritorio, para verificar si el webkitAudioContext es una función).

Aquí está el código para que pruebes: http://jsfiddle.net/sqFbc/


Detecto el iPad mini creando un lienzo que es más grande que un iPad mini puede representar , rellenar un píxel y luego leer el color de nuevo. El iPad mini lee el color como '000000'. Todo lo demás lo está mostrando como el color de relleno.

Código parcial:

function rgbToHex(r, g, b) {
    if (r > 255 || g > 255 || b > 255)
        throw "Invalid color component";
    return ((r << 16) | (g << 8) | b).toString(16);
}
var test_colour = '8ed6ff';
working_context.fillStyle = '#' + test_colour;
working_context.fillRect(0,0,1,1);
var colour_data = working_context.getImageData(0, 0, 1, 1).data;
var colour_hex = ("000000" + rgbToHex(colour_data[0], colour_data[1], colour_data[2])).slice(-6);

Necesito esto para el tamaño del lienzo, así que es la detección de características en mi caso de uso.


No se ha probado, pero en lugar de reproducir un archivo de audio y verificar el balance, podría funcionar para escuchar el micrófono, extraer el ruido de fondo y calcular su "color" (gráfico de frecuencia). Si IPad Mini tiene un modelo de micrófono diferente al de IPad 2, entonces su color de fondo debe ser muy diferente y algunas técnicas de toma de huellas dactilares de audio podrían ayudarlo a determinar qué dispositivo está en uso.

No creo seriamente que pueda ser factible y que valga la pena la molestia en este caso específico, pero creo que las huellas dactilares del ruido de fondo podrían usarse en algunas aplicaciones, por ejemplo, para decirte dónde estás cuando estás dentro de un edificio.


Todas las soluciones aquí no están preparadas para el futuro (lo que impide que Apple lance un iPad con el mismo tamaño de pantalla que el iPad 2 pero con la misma resolución que el iPad Mini). Entonces se me ocurrió una idea:

Crea un div con un ancho de 1 pulgada y agrégalo al cuerpo. Luego creo otro div con 100% de ancho y lo agrego al cuerpo:

var div1= $("<div/>").appendTo(document.body).width("1in");
var div2= $("<div/>").appendTo(document.body).width("100%");

La función jQuery width () siempre devuelve valores en píxeles para que pueda simplemente:

var screenSize= div2.width() / div1.width();

screenSize ahora mantiene el tamaño disponible para la aplicación en pulgadas (aunque tenga cuidado al redondear los errores). Puedes usar eso para colocar tu GUI de la forma que más te guste. Además, no te olvides de quitar los divs inútiles después.

También tenga en cuenta que el algoritmo propuesto por Kaspars no solo no funcionará si el usuario ejecuta la aplicación como pantalla completa, sino que también se interrumpirá si Apple parchea la interfaz de usuario del navegador.

Esto no diferenciará los dispositivos, pero como explicó en su edición, lo que realmente quiere saber es el tamaño de la pantalla del dispositivo. Mi idea tampoco le dirá exactamente el tamaño de la pantalla, pero le dará una información aún más útil, el tamaño real (en pulgadas) que tiene disponible para dibujar su GUI.

EDITAR: use este código para verificar si realmente funciona en su dispositivo. No tengo ningún iPad para probarlo.

var div1= $("<div/>").appendTo(document.body).width("1in").height("1in").css("position", "absolute");
var div2= $("<div/>").appendTo(document.body).width("100%").height("100%").css("position", "absolute");
var width= div2.width() / div1.width()
var height= div2.height() / div1.height()
alert(Math.sqrt(width*width + height*height));

Debería aparecer una ventana con su tamaño de pantalla en pulgadas. Parece que funciona en mi computadora portátil, devolviendo 15.49 mientras que la pantalla de mi computadora portátil se comercializa como 15.4 ''. ¿Alguien puede probar esto en iPads y publicar comentarios por favor? No te olvides de ejecutarlo a pantalla completa.

EDIT2: Resulta que la página en la que lo probé tenía algún CSS conflictivo . He arreglado el código de prueba para que funcione correctamente ahora. Necesita posición: absoluta en los divs para que pueda usar la altura en%.

EDIT3: hice una investigación, y parece que no hay manera de obtener realmente el tamaño de la pantalla en cualquier dispositivo. No es algo que el sistema operativo pueda saber. Cuando usas una unidad del mundo real en CSS, en realidad es solo una estimación basada en algunas propiedades de tu pantalla. No hace falta decir que esto no es del todo exacto.





svg