[javascript] Detectar iPad Mini en HTML5


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

Question

El iPad Mini de Apple es un clon más pequeño del iPad 2 en más formas de las que nos gustaría. En JavaScript, el objeto window.navigator expone los mismos valores para Mini y iPad 2. Mis pruebas hasta el momento para detectar la diferencia no me han llevado al éxito.

¿Porque es esto importante?

Como las pantallas de iPad Mini y 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 del dedo del usuario, por lo tanto, es posible que deseemos escalar ciertas imágenes o botones para proporcionar una mejor experiencia al usuario.

Cosas que he intentado hasta ahora (incluidos 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
  • Hacer todo tipo de CSS webkit se transforma durante un tiempo determinado y contar cuadros renderizados con requestAnimFrame (esperaba detectar una diferencia medible)

Estoy recién de ideas. ¿Qué hay de tí?

Actualización Gracias por las respuestas hasta el momento. Me gustaría comentar sobre las personas que votaron en contra de detectar iPad mini versus 2 ya que Apple tiene uhm, una guía para gobernarlos a todos. De acuerdo, este es mi razonamiento por el cual siento que realmente tiene sentido en el mundo saber si una persona está usando un iPad mini o un 2. Y haz lo que quieras con mi razonamiento.

El iPad mini no solo es 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 celebra con las dos manos cuando se juega a menos que sea Chuck Norris . El mini es más pequeño, pero también es mucho más ligero y permite un juego en el que lo sostienes con una mano y usas otro para deslizar o golpear o lo que sea. Como diseñador y desarrollador de juegos, me gustaría saber si es un mini, así que puedo elegir proporcionarle al jugador un esquema de control diferente si quiero (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 tiende a usar la configuración predeterminada, por lo que omite un control virtual y pone otro control basado en el toque en la pantalla (simplemente dando un ejemplo arbitrario) cuando el jugador carga el por primera vez, lo que a mí, y probablemente a otros diseñadores de juegos, me gustaría poder hacer.

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




¿Qué tal un micro benchmark, calcule algo que toma aproximadamente X microsegundos en iPad 2 y Y sec 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.




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

Déjame darte un ejemplo: iPad mini, versión 6.0, está exponiendo " 10A406 " como número de compilación, mientras que el 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/ ".

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




Based on Douglas question about new webkitAudioContext().destination.numberOfChannels on iPad 2 I decided to run some tests.

Checking numberOfChannels returned 2 on iPad mini but nothing on iPad 2 with iOS 5 and 2 as well with iOS 6.

Then I tried to check if webkitAudioContext is available

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

Same here iPad Mini and iPad 2 with iOS 6 returns true while iPad 2 with iOS 5 returns false.

(This test don't work on desktop, for desktop check if webkitAudioContext is a function).

Here's the code for you to try out: http://jsfiddle.net/sqFbc/




Siempre puedes preguntarle al usuario?

Si el usuario no puede ver los botones o el contenido, ofrézcales una forma de administrar la escala por sí mismos. Siempre puede construir algunos botones de escala en el sitio para hacer que el contenido (texto / botones) sea más grande o más pequeño. Esto estaría (casi) garantizado para funcionar para cualquier resolución de iPad actual y probablemente cualquier resolución futura de Apple decida que quiere hacer.




In iOS7 there is a system-wide setting user can tweak: when things become too small to read, Text Size setting can be changed.

That text size can be used to form UI of plausible dimensions, eg for a button (tested on iPad Mini Retina to react to Text Size setting changes):

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

( sample button CSS, thanks to jsfiddle and cssbuttongenerator)




All solutions here are not future-proof (what prevents Apple from releasing an iPad with the same screen size as the iPad 2 but same resolution as the iPad Mini). So I came up with an idea:

Create a div with 1 inch width and append it to the body. Then I create another div with 100% width and append it to the body:

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

jQuery width() function always returns values in pixels so you can just:

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

screenSize now holds the size available to the application in inches (beware rounding erros though). You can use that to place your GUI the way you like it. Also don't forget to remove the useless divs afterwards.

Also note that the algorithm proposed by Kaspars not only will not work if the user runs the application as full screen, but it will also break if Apple patches the browser UI.

This won't differentiate the devices, but as you explained in your edit what you actually wants to know is the device screen size. My idea will also not tell you exactly the screen size, but it will give you an even more useful information, the actual size (in inches) that you have available to draw your GUI.

EDIT: Use this code to check if it actually works on your device. I don't own any iPads to test it on.

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));

It should popup a window with your screensize in inches. It seems to work on my laptop, returning 15.49 while my laptop screen is marketed as 15.4''. Can anyone test this on iPads and post comments please? Don't forget to run it full screen.

EDIT2: It turns out that the page I tested it in had some conflicting CSS . I fixed the test code to work properly now. You need position: absolute on the divs so you can use height in %.

EDIT3: I did some research, and it seems there is no way to actually get the size of the screen on any device. It's not something the OS can know. When you use a real world unit in CSS it is actually just an estimation based on some properties of your screen. Needless to say that this is not accurate at all.




EDIT 1: Mi respuesta original, a continuación, fue "do not do it". En aras de ser positivo:

La verdadera pregunta, creo, no tiene nada que ver con el iPad X frente al iPad mini. Creo que se trata de optimizar las dimensiones y la colocación de los elementos de la interfaz de usuario a la ergonomía del usuario. Debe determinar el tamaño de los dedos del usuario para controlar el tamaño del 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. Vamos a exagerar: su aplicación se ejecuta en una pantalla de 40 pulgadas en diagonal. No sé la marca y el modelo o el DPI. ¿Cómo se dimensionan los controles?

Debe mostrar un botón que sea el elemento de activación en el sitio / juego. Dejaré que decidas 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 que aparezcan 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. Necesita experimentar para ver qué tiene sentido aquí y qué tan pequeño debe ser el 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 toca la matriz de botones, obtendrá efectivamente una imagen del área de contacto del dedo del usuario. A continuación, puede usar los criterios que desee (probablemente derivados empíricamente) para llegar a un conjunto de números que puede usar para escalar y ubicar los diversos elementos de la interfaz de usuario según sus requisitos.

La belleza de este enfoque es que ya no te importa con qué nombre o modelo de dispositivo estés tratando. Lo único 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 ocultarse como parte del proceso de entrada en la aplicación. Por ejemplo, si se trata de un juego, tal vez haya un botón "Reproducir" o varios botones con los nombres de los usuarios o un medio para seleccionar qué nivel tocarán, etc. Se entiende 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: Simplemente notando que probablemente no necesites tantos botones de sentido. Un conjunto de círculos concéntricos o botones dispuestos como un gran asterisco * podría funcionar perfectamente. Tienes que experimentar

Con mi respuesta anterior, a continuación, les doy las dos caras 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 agrandar sus botones.

Si he aprendido algo al hacer aplicaciones nativas de iOS es que tratar de ser más astuto que Apple es una fórmula para el dolor y la irritación indebidos. Si eligen no permitir que identifiques el dispositivo es porque, bueno, en su caja de arena, no deberías.

Me pregunto, ¿estás ajustando el tamaño / ubicación en retrato versus paisaje?




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

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

"Tú le pides eso".

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 son geniales, pero una solución simple podría ser que su programa pregunte qué iPad están usando cuando lo inician. .

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

Algunos ejemplos:

  • La detección de teclado durante la instalación del SO a veces no puede detectar un teclado específico, por lo que el instalador debe preguntar.
  • Windows pregunta si una red a la que se conecta es una red doméstica o una red 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 contraseña.

La mejor de las suertes: ¡espero que encuentres una solución increíble! Si no lo haces, no olvides este.




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 le lleva al iPad alcanzar la velocidad del terminal. El iPad más grande tiene un mayor coeficiente de resistencia aerodinámica y debería alcanzar la velocidad del terminal en menos tiempo que un iPad Mini .

Aquí hay un código de muestra para comenzar.

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

Es casi seguro que tenga que volver a visitar este código cuando Apple inevitablemente libere el próximo iPad en un factor de forma diferente. Pero estoy seguro de que estarás al tanto de todo y mantendrás este hack para cada nueva versión del iPad.




Este es un tiro salvaje, pero una de las diferencias entre el iPad 2 y el iPad mini es que el primero no tiene un giroscopio de 3 ejes. Tal vez sea posible utilizar la API de orientación del dispositivo 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 de rotationRate si el dispositivo tiene un giroscopio.

Lo siento, no puedo dar un POC de trabajo; no tengo acceso a un iPad mini. Tal vez alguien que sabe un poco más sobre estas API de orientación pueda sonar aquí.




Related