Detectar o iPad Mini em HTML5

O iPad Mini da Apple é um clone menor do iPad 2 de mais maneiras do que gostaríamos. Em JavaScript, o window.navigatorobjeto expõe os mesmos valores para o Mini e o iPad 2. Até agora, meus testes para detectar a diferença não levaram ao sucesso.

Por que isso é importante?

Como as telas do iPad Mini e iPad 2 são idênticas em pixels, mas variam em tamanho real (polegadas / centímetros), elas variam em PPI (pixels por polegada).

Para que aplicativos e jogos da Web ofereçam uma interface amigável, determinados elementos são ajustados em tamanho em relação à posição do polegar ou do dedo do usuário, portanto, convém dimensionar determinadas imagens ou botões para proporcionar uma melhor experiência ao usuário.

Coisas que eu tentei até agora (incluindo algumas abordagens bastante óbvias):

• window.devicepixelratio
• Largura do elemento CSS em cm
• Consultas de mídia CSS (como resolutione -webkit-device-pixel-ratio)
• Desenhos SVG em unidades similares
• Fazendo todos os tipos de transformações de webkit CSS por um tempo definido e contando quadros renderizados com requestAnimFrame(eu esperava detectar uma diferença mensurável)

Estou sem idéias. E quanto a você?

Atualizar Obrigado pelas respostas até agora. Gostaria de comentar sobre as pessoas que votam contra a detecção do iPad mini versus 2, como a Apple tem, uma diretriz para governar todas elas. Ok, eis o meu raciocínio sobre o porquê de realmente fazer todo o sentido do mundo saber se uma pessoa está usando um iPad mini ou um 2. E faça com o meu raciocínio o que você gosta.

O iPad mini não é apenas um dispositivo muito menor (9,7 polegadas versus 7,9 polegadas), mas seu formato permite um uso diferente. O iPad 2 geralmente é realizado com as duas mãos durante os jogos, a menos que você seja Chuck Norris . O mini é menor, mas também é muito mais leve e permite uma jogabilidade em que você o segura em uma mão e usa a outra para deslizar ou tocar ou algo assim. Como designer e desenvolvedor de jogos, eu gostaria de saber se é um mini, para que eu possa fornecer ao jogador um esquema de controle diferente, se eu quiser (por exemplo, após testes A / B com um grupo de jogadores).

Por quê? Bem, é um fato comprovado que a maioria dos usuários tende a seguir as configurações padrão, deixando de fora um polegar virtual e colocando outro controle baseado em toque na tela (apenas dando um exemplo arbitrário aqui) quando o player carrega o jogo pela primeira vez é o que eu, e provavelmente outros criadores de jogos, adoraria poder fazer.

Portanto, o IMHO vai além das discussões sobre diretrizes / dedos grossos e é apenas algo que a Apple e todos os outros fornecedores devem fazer: permita-nos identificar exclusivamente o seu dispositivo e pensar diferente em vez de seguir as diretrizes.

Reproduza um arquivo de áudio estéreo e compare a resposta do acelerômetro quando o volume estiver alto no canal direito e no esquerdo - o iPad2 possui alto-falantes mono, enquanto o iPad Mini possui alto-falantes estéreo.

Precisa da sua ajuda para coletar os dados, visite esta página e me ajude a coletar dados para essa ideia maluca. Eu não tenho um iPad mini, então eu realmente preciso da sua ajuda

Atualização: parece que esses valores estão relatando a largura e a altura da janela de exibição no momento da criação da guia, e eles não mudam após a rotação, portanto, esse método não pode ser usado para a detecção de dispositivos !

Você pode usar o screen.availWidthou screen.availHeightcomo eles parecem diferentes para o iPad Mini e o iPad 2.

iPad Mini

screen.availWidth = 768
screen.availHeight = 1004

Ipad 2

screen.availWidth = 748
screen.availHeight = 1024

Fonte: http://konstruktors.com/blog/web-design/4396-detect-ipad-mini-javascript/

Entendo que essa pode ser uma solução pouco tecnológica, mas como ainda não conseguimos encontrar mais nada ..

Suponho que você já verifique a maioria dos outros dispositivos, portanto vejo os seguintes cenários possíveis.

Você pode verificar TODOS os dispositivos mais populares possíveis que exijam dimensionamento / CSS especiais e, se corresponder, nenhum deles supõe que seja um iPad mini ou simplesmente pergunta ao usuário?

// 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.
}

Eu sei que isso pode parecer uma abordagem estúpida no momento, mas se atualmente não temos como decidir se o dispositivo é um iPad mini ou um iPad 2, pelo menos, o site será utilizável com dispositivos mini iPad fazendo algo assim.

Você pode até usar algo assim:

"Para oferecer a melhor experiência de navegação possível, tentamos detectar o tipo de dispositivo para personalizar o site. Infelizmente, devido a limitações, isso nem sempre é possível e, atualmente, não podemos determinar se você usa um iPad 2 ou iPad. mini usando esses métodos.

Para obter a melhor experiência de navegação possível, selecione o dispositivo que você está usando abaixo.

Essa opção será armazenada para futuras visitas ao site neste dispositivo.

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

"

Não estou totalmente familiarizado com o que você pode ou não fazer no Javascript. Sei que você pode obter o IP de um usuário, mas é possível obter o endereço mac de um usuário? Esses intervalos são diferentes entre o iPad2 e o iPad mini?

Sei que é uma solução horrível, mas, no momento, a única maneira de diferenciar entre um iPad Mini e um iPad 2 é verificar seu número de compilação e mapear cada número de compilação com o dispositivo relacionado.

Deixe-me dar um exemplo: o iPad mini, versão 6.0, está expondo " 10A406" como número de compilação, enquanto o iPad 2 está expondo " 10A5376e".

Esse valor pode ser obtido facilmente através de uma regex no agente do usuário ( window.navigator.userAgent); esse número é prefixado com " Mobile/".

Infelizmente, esta é a única maneira inequívoca de detectar um iPad Mini; Eu sugeriria adotar uma viewportabordagem relacionada (onde suportada, usando unidades vh / vw) para exibir adequadamente o conteúdo em diferentes tamanhos de tela.

tl; dr Não compense a diferença entre o iPad mini e o iPad 2, a menos que você também compense entre dedos gordos e magros.

A Apple parece estar deliberadamente tentando não deixar você dizer a diferença. A Apple parece não querer que escrevamos códigos diferentes para as diferentes versões de tamanho dos iPads. Não sendo parte da Apple, não sei ao certo, estou apenas dizendo que é assim que parece. Talvez, se a comunidade de desenvolvedores criar um detector sofisticado para minis do iPad, a Apple possa quebrá-lo deliberadamente em versões futuras do iOS. A Apple deseja que você defina seu tamanho mínimo de destino para 44 pontos iOS, e o iOS exibirá isso em dois tamanhos: o tamanho maior do iPad e o tamanho menor do iPhone / iPad. 44 pontos é bastante generoso, e seus usuários certamente saberão se estão no iPad menor, portanto podem compensar por conta própria.

Sugiro voltar ao motivo declarado para solicitar o detector: ajustar o tamanho do alvo para o conforto do usuário final. Ao decidir projetar para um tamanho no iPad grande e outro no iPad pequeno, você decide que todas as pessoas têm dedos do mesmo tamanho. Se o seu design é rígido o suficiente para que a diferença de tamanho de um iPad 2 e um iPad mini faça a diferença, o tamanho dos dedos entre eu e minha esposa fará uma diferença maior. Portanto, compense o tamanho do dedo do usuário, não o modelo do iPad.

Eu tenho uma sugestão sobre como medir o tamanho do dedo. Eu sou um desenvolvedor nativo do iOS, então não sei se isso pode ser feito no HTML5, mas aqui está como medir o tamanho do dedo em um aplicativo nativo. Gostaria que o usuário juntasse dois objetos e depois medisse o quão próximos eles se aproximavam. Dedos menores aproximam os objetos e você pode usar essa medida para derivar um fator de escala. Isso ajusta automaticamente o tamanho do iPad. A mesma pessoa terá uma medida maior dos pontos na tela em um iPad mini do que em um iPad 2. Para um jogo, você pode chamar isso de uma etapa de calibração, ou nem mesmo chamar. Tê-lo como um passo inicial. Por exemplo, em um jogo de tiro, o jogador deve colocar a munição na arma com um movimento de pinça.

Peça ao usuário para largar o iPad a vários milhares de metros acima do solo. Em seguida, use o acelerômetro interno para medir o tempo necessário para o iPad atingir a velocidade terminal. O iPad maior tem um coeficiente de arrasto maior e deve atingir a velocidade terminal em menos tempo que um iPad Mini .

Aqui está um código de exemplo para você começar.

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

Você quase certamente precisa revisitar esse código quando a Apple inevitavelmente lança o próximo iPad em um formato diferente. Mas tenho certeza que você ficará por dentro das coisas e manterá esse hack para cada nova versão do iPad.

Infelizmente, no momento parece que isso não é possível: http://www.mobilexweb.com/blog/ipad-mini-detection-for-html5-user-agent

Há dois dias, twitei o primeiro problema detectado: “ Confirma-se que o iPad Mini User Agent é igual ao iPad 2 ". Recebi literalmente centenas de respostas dizendo que cheirar o agente do usuário é uma prática ruim, que devemos detectar recursos, não dispositivos, etc.

Bem, sim, pessoal, você está certo, mas não tem relação direta com o problema. E preciso adicionar a segunda má notícia: também não há técnica do lado do cliente para fazer a "detecção de recursos" .

Este é um tiro certeiro, mas uma das diferenças entre o iPad 2 e o iPad mini é que o primeiro não possui um giroscópio de 3 eixos. Talvez seja possível usar a API de orientação do dispositivo WebKit para ver que tipo de informação você pode obter dela.

Por exemplo, esta página parece sugerir que você só pode obter o rotationRatevalor se o dispositivo tiver um giroscópio.

Desculpe, não posso fornecer um POC ativo - não tenho acesso a um iPad mini. Talvez alguém que conheça um pouco mais sobre essas APIs de orientação possa entrar aqui.

Bem, o iPad 2 e o iPad Mini têm baterias de tamanhos diferentes.

Se iOS 6 suporta, você pode obter o nível atual da bateria de 0.0..1.0usar window.navigator.webkitBattery.level. Em algum nível, seja em hardware ou software, isso provavelmente é calculado como CurrentLevel / TotalLevel, onde ambos são ints. Nesse caso, isso resultará em um ponto flutuante que é múltiplo de 1 / TotalLevel. Se você fizer muitas leituras de nível de bateria dos dois dispositivos e calcular, battery.level * npoderá encontrar um valor de n em que todos os resultados começam a ficar próximos de números inteiros, o que fornecerá a você iPad2TotalLevele iPadMiniTotalLevel.

Se esses dois números são diferentes e são mutuamente primos, na produção você pode calcular battery.level * iPad2TotalLevele battery.level * iPadMiniTotalLevel. O que estiver mais próximo de um número inteiro indicará qual dispositivo está sendo usado.

Desculpe pelo número de ifs nesta resposta! Espero que algo melhor aconteça.

EDIT 1: Minha resposta original, abaixo, foi "não faça isso". No interesse de ser positivo:

A verdadeira questão, eu acho, não tem nada a ver com o iPad X vs. iPad mini. Eu acho que é sobre como otimizar as dimensões dos elementos da interface do usuário e o posicionamento para a ergonomia do usuário. Você precisa determinar o tamanho dos dedos do usuário para conduzir o dimensionamento e, talvez, o posicionamento do elemento da interface do usuário. Isso, novamente, é e provavelmente deve ser alcançado sem a necessidade de realmente saber em qual dispositivo você está executando. Vamos exagerar: seu aplicativo está sendo executado em uma tela diagonal de 40 polegadas. Não conhece a marca e modelo ou o DPI. Como você dimensiona os controles?

Você precisa exibir um botão que é o elemento bloqueador no site / jogo. Vou deixar que você decida onde ou como faz sentido fazer isso.

Embora o usuário veja isso como um único botão, na realidade ele será composto por uma matriz de pequenos botões compactados firmemente que é visualmente coberta para aparecer como uma imagem de botão único. Imagine um botão de 100 x 100 pixels composto por 400 botões, cada um com 5 x 5 pixels. Você precisa experimentar para ver o que faz sentido aqui e quão pequena é a sua amostragem.

CSS possível para a matriz de botões:

.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;
} 

E a matriz resultante:

Quando o usuário toca na matriz de botões, você efetivamente obtém uma imagem da área de contato do dedo do usuário. Em seguida, você pode usar qualquer critério que desejar (provavelmente derivado empiricamente) para chegar a um conjunto de números que você pode usar para dimensionar e posicionar os vários elementos da interface do usuário de acordo com seus requisitos.

A vantagem dessa abordagem é que você não se importa mais com o nome ou modelo do dispositivo com o qual está lidando. Tudo o que importa é o tamanho do dedo do usuário em relação ao dispositivo.

Eu imaginaria que esse botão sense_array poderia estar oculto como parte do processo de entrada no aplicativo. Por exemplo, se for um jogo, talvez exista um botão "Jogar" ou vários botões com os nomes dos usuários ou um meio para selecionar em que nível eles jogarão etc. Você entendeu a idéia. O botão sense_array pode estar em qualquer lugar que o usuário precise tocar para entrar no jogo.

EDIT 2: Apenas observe que você provavelmente não precisa de muitos botões sensoriais. Um conjunto de círculos ou botões concêntricos dispostos como um enorme asterisco *pode funcionar perfeitamente. Você tem que experimentar.

Com a minha antiga resposta, abaixo, estou lhe dando os dois lados da moeda.

RESPOSTA ANTIGA:

A resposta certa é: não faça isso. É uma má idéia.

Se seus botões são tão pequenos que se tornam inutilizáveis ​​em um mini, você precisa aumentá-los.

Se eu aprendi alguma coisa ao fazer aplicativos iOS nativos, é que tentar enganar a Apple é uma fórmula para dor e agravamento indevidos. Se eles escolherem não permitir que você identifique o dispositivo, é porque, bem, na caixa de areia deles, você não deveria.

Gostaria de saber se você está ajustando o tamanho / local em retrato versus paisagem?

Que tal um micro benchmark, calcule algo que leva aproximadamente X microssegundos no iPad 2 e Y seg no iPad mini.

Provavelmente não é preciso o suficiente, mas pode haver alguma instrução em que o chip do iPad mini seja mais eficiente.

Sim, é um bom ponto para verificar o giroscópio. Você pode fazer isso facilmente com

https://developer.apple.com/documentation/webkitjs/devicemotionevent

ou algo parecido

window.ondevicemotion = function(event) {
    if (navigator.platform.indexOf("iPad") != -1 && window.devicePixelRatio == 1) {
        var version = "";
        if (event.acceleration) version = "iPad2";
        else version="iPad Mini";

        alert(version);
    }
    window.ondevicemotion = null;
}​

Não possui iPads para testá-lo.

Exija que todos os usuários com o agente do usuário iPad2 forneçam uma foto usando a câmera embutida e detectem a resolução usando a API de arquivos HTML . As fotos do iPad Mini terão uma resolução mais alta devido às melhorias na câmera.

Você também pode criar um elemento de tela invisível e convertê-lo em PNG / JPG usando a API do Canvas. Não tenho como testá-lo, mas os bits resultantes podem ser diferentes devido ao algoritmo de compactação subjacente e à densidade de pixels do dispositivo.

Você sempre pode perguntar ao usuário ?!

Se o usuário não conseguir ver os botões ou o conteúdo, forneça a eles uma maneira de gerenciar a escala. Você sempre pode criar alguns botões de escala no site para aumentar / diminuir o conteúdo (texto / botões). Isso seria (quase) garantido para funcionar com qualquer resolução atual do iPad e provavelmente com qualquer resolução futura que a Apple decidir que deseja fazer.

Esta não é uma resposta para sua pergunta, mas espero que seja mais útil do que dizer "não faça isso":

Em vez de detectar o iPad Mini, por que não detectar que um usuário está tendo dificuldades para acessar o controle (ou: está constantemente atingindo uma sub-região do controle) e aumentar / diminuir o tamanho do controle para acomodá-lo?

Os usuários que precisam de controles maiores os obtêm independentemente do hardware; os usuários que não precisam de controles maiores e desejam ver mais conteúdo também. Não é tão simples quanto apenas detectar o hardware, e haverá algumas coisas sutis para corrigir, mas se isso tiver sido feito com cuidado, pode ser muito bom.

Isso me lembra uma citação do filme Equilibrium:

"Qual, você diria, é a maneira mais fácil de tirar uma arma de um clérigo da Grammaton?"

"Você pede a ele."

Estamos tão acostumados a lutar por soluções, quando às vezes pode ser melhor perguntar. (Existem boas razões para que geralmente não façamos isso, mas sempre é uma opção.) Todas as sugestões aqui são brilhantes, mas uma solução simples pode ser fazer com que seu programa pergunte qual iPad está usando quando o inicia. .

Sei que essa é uma resposta atrevida, mas espero que seja um lembrete de que não precisamos lutar por tudo. (Eu me preparei para os votos negativos.: P)

Alguns exemplos:

• Às vezes, a detecção do teclado durante as instalações do sistema operacional não consegue detectar um teclado específico, portanto, o instalador precisa perguntar.
• O Windows pergunta se uma rede à qual você se conecta é uma rede doméstica ou pública.
• Os computadores não podem detectar a pessoa que está prestes a usá-lo, portanto, exigem um nome de usuário e senha.

Boa sorte - espero que você encontre uma solução incrível! Se não o fizer, não esqueça este.

Não respondendo à pergunta, mas a pergunta por trás da pergunta:

Seu objetivo é melhorar a experiência do usuário em uma tela menor. A aparência dos controles da interface do usuário é uma parte dela. Outra parte do UX é a maneira como o aplicativo responde.

E se você tornar a área que responde aos toques grande o suficiente para ser amigável no iPad Mini, mantendo a representação visual dos controles da interface do usuário pequena o suficiente para ser visualmente agradável no iPad?

Se você tiver coletado toques suficientes que não estavam na área visual, poderá decidir dimensionar visualmente os Controles da interface do usuário.

Como bônus, isso também funciona para grandes mãos no iPad.

Todas as soluções aqui não são à prova de futuro (o que impede a Apple de lançar um iPad com o mesmo tamanho de tela que o iPad 2, mas com a mesma resolução que o iPad Mini). Então, eu tive uma ideia:

Crie uma div com 1 polegada de largura e anexe-a ao corpo. Então eu crio outra div com 100% de largura e anexo ao corpo:

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

A função width () do jQuery sempre retorna valores em pixels para que você possa:

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

O screenSize agora mantém o tamanho disponível para o aplicativo em polegadas (cuidado com os erros de arredondamento). Você pode usar isso para colocar sua GUI do jeito que você gosta. Também não se esqueça de remover os divs inúteis depois.

Observe também que o algoritmo proposto pela Kaspars não funcionará apenas se o usuário executar o aplicativo em tela cheia, mas também será interrompido se a Apple corrigir a interface do usuário do navegador.

Isso não diferencia os dispositivos, mas, como você explicou em sua edição, o que você realmente quer saber é o tamanho da tela do dispositivo. Minha idéia também não informa exatamente o tamanho da tela, mas fornece informações ainda mais úteis, o tamanho real (em polegadas) que você tem disponível para desenhar sua GUI.

EDIT: Use este código para verificar se ele realmente funciona no seu dispositivo. Não possuo iPads para testá-lo.

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

Deve aparecer uma janela com o tamanho da tela em polegadas. Parece funcionar no meu laptop, retornando 15,49 enquanto a tela do meu laptop é comercializada como 15,4 ''. Alguém pode testar isso em iPads e postar comentários, por favor? Não se esqueça de executá-lo em tela cheia.

EDIT2: Acontece que a página em que a testei tinha algum CSS conflitante . Corrigi o código de teste para funcionar corretamente agora. Você precisa de position: absolute nas divs para poder usar a altura em%.

EDIT3: Fiz algumas pesquisas e parece que não há como obter o tamanho da tela em qualquer dispositivo. Não é algo que o sistema operacional possa saber. Quando você usa uma unidade do mundo real em CSS, na verdade é apenas uma estimativa com base em algumas propriedades da sua tela. Escusado será dizer que isso não é exato.

Não testado, mas em vez de reproduzir um arquivo de áudio e verificar a balança, ele pode funcionar para ouvir o microfone, extrair o ruído de fundo e calcular sua "cor" (gráfico de frequência). Se o IPad Mini tiver um modelo de microfone diferente do IPad 2, a cor do plano de fundo deverá ser mensurável diferente e algumas técnicas de impressão digital de áudio poderão ajudá-lo a saber qual dispositivo está em uso.

Eu não acho seriamente viável e vale a pena aborrecer neste caso específico, mas acho que a impressão digital do ruído de fundo pode ser usada em alguns aplicativos, por exemplo, para dizer onde você está quando está dentro de um edifício.

Com base na pergunta de Douglas sobrenew webkitAudioContext().destination.numberOfChannels iPad 2, decidi executar alguns testes.

A verificação do numberOfChannels retornou 2no iPad mini, mas nada no iPad 2 com o iOS 5 e 2também com o iOS 6.

Tentei verificar se o webkitAudioContext está disponível

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

O mesmo aqui o iPad Mini e o iPad 2 com iOS 6 retornam true enquanto o iPad 2 com iOS 5 retorna false.

(Este teste não funciona na área de trabalho, verifique se o webkitAudioContext é uma função).

Aqui está o código para você experimentar: http://jsfiddle.net/sqFbc/

E se você criou um monte de divs de 1 "x1" de largura e os anexou um a um a um div pai até que a caixa delimitadora saltou de 1 para 2 polegadas? Uma polegada no mini é do mesmo tamanho que uma polegada no iPad, certo?

No iOS7, existe uma configuração em todo o sistema que o usuário pode ajustar: quando as coisas ficam pequenas demais para serem lidas, a configuração do Tamanho do texto pode ser alterada.

Esse tamanho de texto pode ser usado para formar uma interface do usuário de dimensões plausíveis, por exemplo, para um botão (testado no iPad Mini Retina para reagir às alterações nas configurações de Tamanho do texto):

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

( CSS de botão de amostra , graças a jsfiddle e cssbuttongenerator)

Estou detectando o iPad mini criando uma tela maior que um iPad mini pode renderizar , preenchendo um pixel e lendo a cor novamente. O iPad mini lê a cor como '000000'. todo o resto está renderizando-o como a cor de preenchimento.

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

Eu preciso disso para o dimensionamento da tela, para detecção de recursos no meu caso de uso.