Detectar o iPad Mini em HTML5

376

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.

Martin Kool
fonte
boa pergunta .. até eu estava procurando uma solução. Nada encontrado na web
AnhSirk Dasarp
4
A melhor coisa é registrar um bug na apple bugreporter.apple.com Se um número suficiente de pessoas o fizer, há esperança de que elas nos ouçam. A situação atual é bastante desanimadora.
William Jockusch
Você não pode usar -webkit-min-device-pixel-ratio:? Quanto ao iPhone 4 mobilexweb.com/blog/…
Bgi
11
Hmmm, que tal seguir o HIG em vez de tentar fazer isso? Isso é uma perda de tempo e esforço, e sinceramente me deixei doente de ler isso. Por que as pessoas não podem fazer as coisas da maneira certa?
930 Elland

Respostas:

253

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

Avi Marcus
fonte
35
Você não acha que o dispositivo que soa alto quando visita o site é uma má ideia? Sem mencionar que as pessoas podem ter o dispositivo em silêncio. Nenhum som iria parar isso.
flexd
6
Como uma pequena modificação para isso: Reproduza um arquivo de áudio estéreo no qual o canal direito é uma versão invertida do canal esquerdo. Com um único alto-falante, eles devem cancelar e não afetar o acelerômetro. Mas de qualquer maneira, confiar nos alto-falantes + acelerômetro é super confiável.
Kevin Ennis
4
Alguém realmente precisa implementar esta solução e mostrar os resultados.
Stephen Eilert
14
Nessa linha, no iPad2, o que new webkitAudioContext().destination.numberOfChannelsretorna?
Douglas
3
@flexd você não acha que fazer a detecção de dispositivos é uma má ideia?
Ricardo Tomasi
132

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/

Kaspars
fonte
3
Até agora, parece a melhor solução sem compromisso.
Morgan Wilde
Eu estou pensando sobre essa diferença. Eu pensei que ambos usam a mesma resolução? O Safari chrome é diferente nesses dois dispositivos?
Marc
10
Este é um detector de quantas guias estão abertas. No meu iPad 3, ele informa valores diferentes quando tenho mais de um toque aberto, correspondendo aos relatórios nas capturas de tela. A captura de tela mini do iPad tem duas guias abertas, enquanto a captura do iPad 2 possui apenas uma. Meu iPad 3 relata valores correspondentes quando tenho uma ou duas guias abertas.
Mr. Berna
7
Não, este não é um detector de quantas guias estão abertas: este é um detector de qual orientação o dispositivo estava aberto quando a guia usada para carregar esta página foi "usada" pela primeira vez. Não tenho certeza se isso ocorre porque o tamanho da janela de visualização agora está realmente fixo nesse valor depois que você gira a guia ou se está simplesmente sendo armazenado em cache incorretamente em algum lugar, mas se você ficar sentado brincando com várias guias em várias rotações configurações você pode ver como ele se correlaciona. Onde fica interessante é que, se você alternar entre guias, girar e retornar à guia anterior e recarregar, ele será atualizado.
Jay Freeman -saurik-
11
Sim, Jay, cometi um erro semelhante, atribuindo um resultado incorretamente à causa errada. Mas meu argumento implícito é o de que este não é um detector para iPad minis, pois dará resultados falso-positivos em outros iPads.
Mr. Berna
84

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?

flexd
fonte
25
Eu concordo muito com esta solução. Permitir que o usuário escolha (e potencialmente altere) seu dispositivo é melhor do que trancá-lo no que você acha que ele deseja. Se você pode determinar o dispositivo com bastante precisão; use isso como padrão, mas acho que você deve sempre oferecer uma opção - mesmo que oculta em um menu de configurações.
Liam Newmarch
2
@LiamNewmarch Também sou um grande fã de adivinhação e alerta, em vez de assumir a preferência do usuário e travá-lo. Às vezes, quero usar o site para desktop no meu iPad. Normalmente, eu quero usar a versão em inglês de um site, independentemente de onde o maldito banco de dados de IP para Geo diga que estou atualmente geograficamente localizado! você tem meu voto positivo, senhor.
Rebecca
7
Recomendaria não usar uma pergunta pop-up no entanto. faça um banner como o SO faz quando ele faz logon automaticamente. Assim, o usuário pode ler a página se não quiser responder, em vez de ser forçado a sair da mentalidade para responder a uma pergunta.
Michael Allen
11
Ao fazer a pergunta aos usuários, você diminui a experiência do usuário o suficiente para que a Apple faça a alteração, já que isso é algo que importa muito.
JiminyCricket 14/11/2012
9
-1: Detesto páginas que me fazem perguntas quando as visito. Minha resposta: "Quem se importa, apenas me mostre o conteúdo!". A diferença entre o iPad2 e o iPad mini não é grande o suficiente (IMnsHO) para justificar essa abordagem. JS sim, perguntas não.
Johndodo #
74

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.

Alessandro Piatti
fonte
5
O número da versão parece ser a chave, mas notei que o número da versão pode variar dependendo do país em que o dispositivo foi adquirido. Por exemplo, na Grécia, o número da versão do iPad 2 parece ser 10A403 em vez de 10A5376e, que também vi do iPad 2 dos EUA. Eu estou supondo que o número de compilação para o mini também pode ser diferente.
esjr
67
Esta solução está incorreta. Para algum contexto: o "número da compilação" descreve o sistema operacional, e não o hardware. Agora, se dispositivos diferentes sempre tivessem versões diferentes do sistema operacional, tudo bem, mas isso só aconteceu no passado para a primeira versão do sistema operacional que acompanha cada novo dispositivo. Nesse caso, 10A406 é o número de compilação do 6.0 para o iPad Mini e 10A403 foi o número de compilação do 6.0 para o iPad 2 ( não o 10A5376e, que era 6.0 beta 4). No entanto, o número da compilação 6.0.1 em ambos já é 10A523, portanto, a compilação atual já é idêntica e as futuras compilações continuarão sendo.
Jay Freeman -saurik-
11
Receio que Jay esteja correto, verifiquei meus dados (como estão): o número da compilação reflete o sistema operacional.
esjr
11
Você já tentou esse PPI hackear? stackoverflow.com/questions/279749/… - basicamente crie um elemento oculto com uma largura de 1 polegada e obtenha a largura em pixels. Isso deve resolver seu problema raiz.
JohnLBevan
@ JohnLBevan: isso pode resolver o problema de renderização, mas e as análises de log, etc? O problema principal é com nossos amigos em Cupertino e o impulso para aplicativos 'nativos'.
esjr
69

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.

Mr. Berna
fonte
11
Este primeiro parágrafo é a resposta correta. O tamanho alvo recomendado de 44 pontos é perfeitamente adequado.
Ricardo Tomasi
Cara, se eu tivesse mais mil votos para dar. Primeiro parágrafo é de fato, você ganhou a internet.
Mike
31

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.

Jason
fonte
Não deveria ser "mais tempo do que um iPad mini"?
precisa saber é o seguinte
11
Linha agradável Galileo-ish do pensamento aplicado a um problema moderno .... Eu me pergunto o que está próximo ..
matanster
2
Para tornar isso mais confiável, os casos do iPad devem ser removidos antes da queda.
Fuhrmanator 24/03
28

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

BenM
fonte
8
@ net.uk.sweet - Então por que você não edita a resposta e corrige os erros? E, aliás, o inglês no texto citado não parece tão ruim.
Sandman
@shi, como você pode saber que o autor desse texto citado é italiano? Também não sou falante nativo de inglês. LOL
Toby D
"não existe uma técnica do lado do cliente para fazer 'detecção de recurso' nem" é completamente falsa. detecção de recurso ! = detecção de dispositivos
Ricardo Tomasi
@ Mytic Moon Acabei de ler o artigo original que está vinculado no post acima, onde há informações sobre o autor.
shi
26

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.

Assaf Lavie
fonte
3
Portanto, o site da Apple não descreve o giroscópio no iPad 2 como um giroscópio de "três eixos"; mas, quando dizem "giroscópio", significam um tipo específico de parte (de modo que os desenvolvedores de aplicativos que desenvolvem jogos que exigem essa parte pelo recurso do giroscópio possam ter certeza de que ela existe e funcionará para eles). Se você fizer uma pesquisa no Google por "" giroscópio de 3 eixos "" iPad 2 "', encontrará vários artigos do final de 2010 e início de 2011 falando sobre como o iPad 2 deverá ter a mesma peça de giroscópio de 3 eixos que o O iPhone 4 já tinha: quando saiu, não ficamos desapontados;
Jay Freeman -saurik-
Foi com isso que baseiei minha sugestão: apple.com/ipad/ipad-2/specs.html Ele não menciona nenhum giroscópio. Apenas "acelerômetro". Dado isso, e o fato de seus documentos parecerem sugerir que alguns dispositivos suportam apenas um subconjunto da API de movimento, vale a pena tentar. Eu faria, se eu tivesse um mini-iPad ...
Assaf Lavie
2
Não, sério: ele diz "giroscópio" bem na mesma seção pequena que "acelerômetro". Acho que posso postar uma captura de tela da página da web que você acabou de vincular com a palavra "giroscópio" realçada, mas você deve conseguir encontrá-la com ctrl-F. (edit: OK, pelo valor do humor, eu fiz isso: i.imgur.com/8BZhx.png <- veja agora?; P) Independentemente disso, para colocar a diferença "giroscópio de 3 eixos" ainda mais para descansar, se você vá para as páginas de nível inferior que a Apple mantém para esse tipo de coisa para referência histórica de suporte, você pode ver que ele diz especificamente "giroscópio de 3 eixos". support.apple.com/kb/SP622
Jay Freeman -saurik-
11
Bem, realmente não há necessidade de especular se há realmente uma diferença entre os recursos da API de movimento no iPad mini e no iPad 2. É apenas uma questão de experimentar e ver. Então, quem tem um iPad mini aqui? Independentemente disso, cheguei a essa idéia examinando as especificações técnicas de ambos os dispositivos e procurando diferenças que podem ser detectadas em HTML / JS. Pode haver outras diferenças também.
perfil completo de Assaf Lavie
20

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.

Douglas
fonte
18

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:

matriz de botões

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?

Martin
fonte
Espere, você leu a pergunta? "certos elementos são ajustados em tamanho em relação à posição do polegar ou do dedo do usuário"
Christian
Minha pergunta era se o OP está ou não ajustando elementos com base na orientação retrato / paisagem. Os navegadores da Web se ajustam automaticamente à largura adicional da paisagem e renderizam todo o conteúdo maior que o retrato. Estou apenas tentando salientar que, a menos que você bloqueie tudo, quase não há como otimizar todos os dispositivos, orientações e usuários possíveis, a menos que você esteja escrevendo um aplicativo iOS nativo. Mesmo assim, você pode ter cuidado com as escolhas que faz. Isso poderia ser feito a partir de um aplicativo da web e javascript? Provavelmente. Só não acho que seja uma boa ideia.
martin
Ah entendo. Edição interessante também, gostaria de ver algo assim na prática.
Christian
11
Um "conjunto de sentidos" assim funcionaria? Suponho que o iOS escolheria a célula mais próxima de onde o usuário tocou e apenas "clicaria" nela, nem todas as células abaixo do dedo do usuário. Se ele fez trabalho, que seria muito muito legal, apesar de tudo.
HellaMad
Não há razão para isso não funcionar. São vários objetos que respondem a eventos de toque e enviam mensagens.
22612 martin's
11

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.

Les
fonte
11

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.

lc0
fonte
12
Esta solução não funciona (testada em um iPad Mini e em um iPad 2: ambos são detectados como "iPad2") como 1) o recurso event.acceleration foi projetado para funcionar se o dispositivo possuir um giroscópio sofisticado ou um acelerômetro mais antigo e 2) de acordo com o site da Apple, tanto o iPad Mini quanto o iPad 2 têm a parte sofisticada do giroscópio, então não há como o conceito dessa verificação ter funcionado em primeiro lugar.
Jay Freeman -saurik-
8

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.

Vlad Magdalin
fonte
7

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.

TK.
fonte
6

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.

Stephen Canon
fonte
6

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.

jedd.ahyoung
fonte
Pode não ser algo que usuários não técnicos estariam cientes.
Julian
5

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.

Laurens
fonte
5

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.

Hoffmann
fonte
Você já testou? 1 polegada é realmente a mesma polegada física no Mini e no iPad? É possível que 1 polegada no Mini apareça apenas como 1/2 polegada.
Kernel James
Testado no iPad 2, 3 e Mini. Todos os três retornam 3.8125.
26412 Alfred
@AlfredNerstu wow realmente? Este é um bug conhecido do Safari? Você pode testá-lo no safari for mac?
Hoffmann
@AlfredNerstu desculpe o código estar errado, eu o corrigi agora, a página em que o testei originalmente tinha alguns CSS conflitantes que o faziam meio que funcionar. Acontece que você precisa da posição: absoluto na div para usar os valores de altura em%. Agora esse código está me dando 15,49 polegadas no meu laptop de 15,4 '' em uma página "limpa" (sem css e sem elementos além dos divs).
Hoffmann
Eu tentei o novo código e agora todos os 2, 3 e Mini retornam 9,5. Eu corro o código em um jsfiddle, não sei se isso poderia atrapalhar algo? O mais provável é que o Safari no iOS seja feito para a tela de 9,7 polegadas e render 1 polegada de acordo?
Alfred
2

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.

gb.
fonte
2

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/

Alfred
fonte
2

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?

Scovetta
fonte
11
Então, eu tentei isso, mas no mini, uma "polegada" é menor que uma "polegada" no iPad comum. Portanto, desta maneira não funcionará.
Scovetta 6/12/12
2

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)

Srg
fonte
1

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.

SystemicPlural
fonte