javascript title attribute - Detecta iPad Mini en HTML5





11 Answers

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/…

style css tooltip

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.




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.




Pídale al usuario que deje caer su iPad desde varios miles de pies sobre el suelo. Luego use el acelerómetro interno para medir el tiempo que tarda el iPad en alcanzar la velocidad máxima. El iPad más grande tiene un mayor coeficiente de arrastre y debería alcanzar la velocidad terminal en menos tiempo que un iPad Mini .

Aquí hay un código de ejemplo para empezar.

function isIPadMini( var timeToReachTerminalVelocity )
{
    return (timeToReachTerminalVelocity > IPAD_MINI_THRESHOLD);
}

Es casi seguro que necesita volver a visitar este código cuando Apple inevitablemente lanza el próximo iPad en un factor de forma diferente. Pero estoy seguro de que te mantendrás al tanto de las cosas y mantendrás este truco para cada nueva versión del iPad.




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í.




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?




¿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.




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.




Esto me recuerda una cita de la película Equilibrium:

"¿Cuál, dirías, es la forma más fácil de alejar un arma de un Clérigo Grammaton?"

"Se lo pides a él".

Estamos tan acostumbrados a luchar por soluciones, cuando a veces es mejor preguntar. (Hay buenas razones por las que generalmente no hacemos esto, pero siempre es una opción). Todas las sugerencias aquí son geniales, pero una solución simple podría ser que su programa pregunte qué iPad están usando cuando lo inician. .

Sé que esta es una respuesta un tanto descarada, pero espero que sea un recordatorio de que no tenemos que luchar por todo. (Me he preparado para los downvotes.: P)

Algunos ejemplos:

  • La detección del teclado durante las instalaciones del sistema operativo a veces no puede detectar un teclado específico, por lo que el instalador tiene que preguntar.
  • Windows pregunta si una red a la que se conecta es una red doméstica o pública.
  • Las computadoras no pueden detectar a la persona que está a punto de usarlo, por lo que requieren un nombre de usuario y una contraseña.

La mejor de las suertes: ¡espero que encuentres una solución increíble! Sin embargo, si no lo hace, no lo olvide.




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.




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/




En iOS7 hay una configuración de todo el sistema que el usuario puede modificar: cuando las cosas se vuelven demasiado pequeñas para leer, la configuración del tamaño del texto se puede cambiar.

Ese tamaño de texto se puede usar para formar la IU de dimensiones plausibles, por ejemplo, para un botón (probado en iPad Mini Retina para reaccionar a los cambios de configuración de Tamaño de texto)

padding: 0.5em 1em 0.5em 1em;
font: -apple-system-body;    

( botón de sample CSS, gracias a jsfiddle y cssbuttongenerator)




Related