Wykryj iPada Mini w HTML5

376

IPad Apple Mini to mniejszy klon iPada 2 na więcej sposobów, niż byśmy chcieli. W JavaScript window.navigatorobiekt wyświetla te same wartości dla Mini i iPada 2. Moje dotychczasowe testy w celu wykrycia różnicy nie doprowadziły do ​​sukcesu.

Dlaczego to jest ważne?

Ponieważ ekrany iPada Mini i iPada 2 są identyczne w pikselach, ale różnią się faktycznym rozmiarem (cale / centymetry), różnią się PPI (piksele na cal).

Aby aplikacje internetowe i gry oferowały przyjazny interfejs użytkownika, niektóre elementy są dostosowywane do wielkości kciuka lub palca użytkownika, dlatego możemy przeskalować niektóre obrazy lub przyciski, aby zapewnić lepszą obsługę.

Rzeczy, których do tej pory próbowałem (w tym niektóre dość oczywiste podejścia):

  • window.devicepixelratio
  • Szerokość elementu CSS w cm
  • Zapytania o media CSS (takie jak resolution i -webkit-device-pixel-ratio)
  • Rysunki SVG w podobnych jednostkach
  • Robienie wszelkiego rodzaju transformacji zestawu CSS przez określony czas i liczenie renderowanych ramek za pomocą requestAnimFrame(miałem nadzieję wykryć mierzalną różnicę)

Brakuje mi pomysłów. Jak o tobie?

Aktualizacja Dziękujemy za dotychczasowe odpowiedzi. Chciałbym skomentować osoby głosujące przeciwko wykryciu iPada mini kontra 2, ponieważ Apple ma Uhm, jedną z wytycznych, aby rządzić nimi wszystkimi. OK, oto moje rozumowanie, dlaczego uważam, że naprawdę sensowne jest, aby wiedzieć, czy dana osoba używa iPada mini lub 2. I rób z moim rozumowaniem to, co lubisz.

IPad mini to nie tylko znacznie mniejsze urządzenie (9,7 cala w porównaniu z 7,9 cala), ale jego forma pozwala na inne użycie. IPad 2 jest zwykle trzymany dwiema rękami podczas grania, chyba że jesteś Chuckiem Norrisem . Mini jest mniejsze, ale jest również znacznie lżejsze i pozwala na rozgrywkę, w której trzymasz go w jednej ręce i używasz drugiej, aby przesunąć, dotknąć lub coś w tym stylu. Jako projektant i programista sam chciałbym się dowiedzieć czy jest to mini, więc mogę wybrać dla gracza inny schemat sterowania, jeśli chcę (na przykład po testach A / B z grupą graczy).

Dlaczego? Cóż, to udowodniony fakt, że większość użytkowników ma tendencję do wybierania ustawień domyślnych, więc pomija się wirtualną pinezkę i wprowadza inną kontrolę opartą na dotknięciu na ekranie (podając tutaj dowolny przykład), gdy gracz ładuje Gra po raz pierwszy jest tym, co ja i prawdopodobnie inni projektanci gier chcielibyśmy mieć zrobić.

IMHO wykracza zatem poza dyskusje na temat grubych palców / wytycznych i jest po prostu czymś, co powinni zrobić Apple i wszyscy inni dostawcy: pozwól nam jednoznacznie zidentyfikować twoje urządzenie i myśleć inaczej, zamiast postępować zgodnie z wytycznymi.

Martin Kool
źródło
dobre pytanie .. nawet ja szukałem rozwiązania. Nic nie znaleziono w Internecie
AnhSirk Dasarp
4
Najlepiej jest zgłosić błąd na stronie apple bugreporter.apple.com Jeśli zrobi to wystarczająco dużo osób, istnieje nadzieja, że ​​nas usłyszą. Obecna sytuacja jest raczej przygnębiająca.
William Jockusch
Nie możesz użyć -webkit-min-device-pixel-ratio:? Jak dla iPhone 4 mobilexweb.com/blog/...
BGI
1
Hmmm, co powiesz na śledzenie HIG zamiast próbowania tego? To strata czasu i wysiłku i szczerze zmartwiłem się, gdy to przeczytałem. Dlaczego ludzie nie mogą robić rzeczy we właściwy sposób?
Elland

Odpowiedzi:

253

Odtwórz plik audio stereo i porównaj reakcję akcelerometru, gdy głośność jest wysoka na prawym i lewym kanale - iPad2 miał głośniki mono, a iPad Mini ma wbudowane głośniki stereo.

Potrzebujesz pomocy w zbieraniu danych, odwiedź tę stronę i pomóż mi zebrać dane dotyczące tego szalonego pomysłu. Nie mam iPada mini, więc naprawdę potrzebuję twojej pomocy

Avi Marcus
źródło
35
Nie sądzisz, że urządzenie wydające dźwięk podczas odwiedzania strony internetowej jest złym pomysłem? Nie wspominając już o tym, że ludzie mogą wyciszyć swoje urządzenie. Żaden dźwięk tego nie powstrzyma.
wygasł
6
Jako niewielka modyfikacja tego: Odtwórz plik audio stereo, w którym prawy kanał jest odwróconą wersją lewego kanału. Z jednym głośnikiem powinny anulować i nie wpływać na akcelerometr. Ale tak czy inaczej, poleganie na głośnikach + akcelerometrze jest bardzo zawodne.
Kevin Ennis
4
Ktoś naprawdę musi wdrożyć to rozwiązanie i pokazać wyniki.
Stephen Eilert
14
Co new webkitAudioContext().destination.numberOfChannelspowraca na tych liniach, na iPadzie 2 ?
Douglas,
3
@flexd nie uważasz, że wykrywanie urządzeń to zły pomysł?
Ricardo Tomasi
132

Aktualizacja: wygląda na to, że te wartości zgłaszają szerokość i wysokość rzutni w momencie tworzenia karty i nie zmieniają się po obrocie, więc nie można użyć tej metody do wykrywania urządzenia !

Można użyć albo screen.availWidthalboscreen.availHeight ponieważ wydają się one różne dla iPada Mini i iPada 2.

iPad Mini

screen.availWidth = 768
screen.availHeight = 1004

iPad 2

screen.availWidth = 748
screen.availHeight = 1024

Źródło: http://konstruktors.com/blog/web-design/4396-detect-ipad-mini-javascript/

Kaspars
źródło
3
Jak dotąd wygląda na najlepsze bezkompromisowe rozwiązanie.
Morgan Wilde
Zastanawiam się nad tą różnicą. Myślałem, że oboje używają tej samej rozdzielczości? Czy Chrome Chrome różni się na tych dwóch urządzeniach?
Marc
10
Jest to wykrywacz liczby otwartych kart. Na moim iPadzie 3 raportuje różne wartości, gdy mam więcej niż jedno dotknięcie otwarte, pasując do raportów na zrzutach ekranu. Zrzut ekranu mini iPada ma dwie otwarte karty, a zrzut ekranu iPad 2 tylko jedną. Mój iPad 3 zgłasza pasujące wartości, gdy mam jedną lub dwie otwarte karty.
Pan Berna
7
Nie, nie jest to wykrywacz liczby otwartych zakładek: jest to wykrywacz orientacji, w którym urządzenie było otwarte, gdy zakładka używana do załadowania tej strony była „używana” po raz pierwszy. Nie jestem pewien, czy dzieje się tak, ponieważ rozmiar rzutni jest tak naprawdę ustalony na tę wartość po obróceniu karty, czy też jest po prostu niepoprawnie zbuforowany gdzieś, ale jeśli siedzisz i grasz wieloma kartami w różnych obrotach konfiguracje można zobaczyć, jak to koreluje. Ciekawe jest to, że po przełączeniu kart, obróceniu, a następnie powrocie do poprzedniej karty i ponownym załadowaniu, następuje aktualizacja.
Jay Freeman -saurik-
1
Tak, Jay, popełniłem podobny błąd, błędnie przypisując wynik niewłaściwej sprawie. Ale moja domniemana uwaga utrzymuje, że nie jest to wykrywacz dla minis iPada, ponieważ da fałszywie pozytywne wyniki na innych iPadach.
Pan Berna
84

Rozumiem, że może to być nieco mało zaawansowane rozwiązanie, ale ponieważ nie wydaje się, abyśmy mogli wymyślić coś jeszcze ...

Zakładam, że sprawdziłeś już większość innych urządzeń, więc widzę możliwe następujące scenariusze.

Możesz sprawdzić WSZYSTKIE możliwe najpopularniejsze urządzenia, które wymagają specjalnego CSS / zmiany rozmiaru, a jeśli pasuje, żadne z nich nie zakłada, że ​​jest to iPad mini, lub po prostu pyta użytkownika?

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

Wiem, że może to wydawać się teraz głupim podejściem, ale jeśli obecnie nie mamy możliwości podjęcia decyzji, czy urządzeniem jest iPad mini lub iPad 2, przynajmniej strona internetowa będzie dostępna dla urządzeń iPad mini robiących coś takiego.

Możesz nawet wybrać coś takiego:

„Aby zapewnić najlepszą możliwą jakość przeglądania, staramy się wykryć typ urządzenia, aby dostosować witrynę do urządzenia. Niestety z powodu ograniczeń nie zawsze jest to możliwe i nie możemy obecnie ustalić, czy korzystasz z iPada 2 czy iPada mini przy użyciu tych metod.

Aby uzyskać najlepszą możliwą jakość przeglądania, wybierz poniżej urządzenie, którego używasz.

Ten wybór zostanie zapisany na potrzeby przyszłych wizyt na stronie internetowej na tym urządzeniu.

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

Nie jestem do końca zaznajomiony z tym, co możesz i nie możesz robić po stronie klienta w Javascript. Wiem, że możesz uzyskać adres IP użytkownika, ale czy można uzyskać adres Mac użytkownika? Czy te zakresy różnią się między iPad2 a iPad mini?

zgięty
źródło
25
Bardzo zgadzam się z tym rozwiązaniem. Umożliwienie użytkownikowi wybrania (i potencjalnej zmiany) swojego urządzenia jest lepsze niż zablokowanie go na potrzeby , które według niego chcą. Jeśli potrafisz dość dokładnie określić urządzenie; użyj tego jako domyślnego, ale myślę, że zawsze powinieneś oferować wybór - nawet jeśli jest ukryty w menu ustawień.
Liam Newmarch,
2
@LiamNewmarch Jestem także wielkim fanem zgadywania i szybkiej reakcji użytkownika, zamiast zakładać preferencje użytkownika i blokować je. Czasami chcę korzystać z witryny na iPadzie. Zwykle chcę korzystać z angielskiej wersji strony, niezależnie od tego, gdzie cholerna baza danych IP-to-Geo mówi, że jestem obecnie geograficznie zlokalizowana! pan ma mój głos.
Rebecca
7
Odradzałbym jednak używanie wyskakującego pytania. zrobić baner, tak jak robi to SO, gdy loguje się automatycznie. Aby użytkownik mógł po prostu przeczytać stronę, jeśli nie chce odpowiedzieć, zamiast zmuszać się do myślenia.
Michael Allen
1
Zadając użytkownikom pytanie, zmniejszasz wrażenia użytkownika na tyle, aby Apple mógł je zmienić, ponieważ jest to kwestia, na której bardzo zależy.
JiminyCricket
9
-1: Nienawidzę stron, które zadają mi pytania, kiedy je odwiedzam. Moja odpowiedź: „Kogo to obchodzi, po prostu pokaż mi treść!”. Różnica między iPadem2 a iPadem mini nie jest wystarczająco duża (IMnsHO), aby uzasadnić to podejście. JS tak, pytania nie.
johndodo
74

Wiem, że to okropne rozwiązanie, ale w tej chwili jedynym sposobem na odróżnienie iPada Mini od iPada 2 jest sprawdzenie numeru kompilacji i mapowanie każdego numeru kompilacji na powiązanym urządzeniu.

Podam przykład: iPad mini, wersja 6.0, wyświetla 10A406numer „ ” jako numer kompilacji, a iPad 2 „ 10A5376e”.

Wartość tę można łatwo uzyskać poprzez wyrażenie regularne na kliencie użytkownika ( window.navigator.userAgent); ten numer jest poprzedzony „ Mobile/”.

Niestety jest to jedyny jednoznaczny sposób na wykrycie iPada Mini; Proponuję zastosować viewportpodejście powiązane (tam, gdzie jest to obsługiwane, używając jednostek vh / vw), aby poprawnie wyświetlać zawartość na różnych rozmiarach ekranu.

Alessandro Piatti
źródło
5
Numer kompilacji wydaje się być kluczem, ale zauważyłem, że numer kompilacji może się różnić w zależności od kraju, w którym urządzenie zostało zakupione. Na przykład w Grecji numer kompilacji iPada 2 wygląda na 10A403 zamiast 10A5376e, co też widziałem z amerykańskiego iPada 2. Domyślam się, że numer kompilacji mini może się również różnić.
esjr
67
To rozwiązanie jest nieprawidłowe. W pewnym kontekście: „numer kompilacji” opisuje system operacyjny, a nie sprzęt. Teraz, jeśli różne urządzenia zawsze miały różne wersje systemu operacyjnego, byłoby dobrze, ale było to prawdą tylko w przypadku pierwszej wersji systemu operacyjnego, która była dostarczana z każdym nowym urządzeniem. W tym przypadku 10A406 to numer kompilacji 6.0 dla iPada Mini, a 10A403 to numer kompilacji 6.0 dla iPada 2 ( nie 10A5376e, czyli 6.0 beta 4). Jednak numer wersji 6.0.1 na obu wynosi już 10A523, więc bieżąca wersja jest już identyczna, a przyszłe wersje będą nadal.
Jay Freeman -saurik-
1
Obawiam się, że Jay ma rację, sprawdziłem moje dane (takie, jakie są): numer kompilacji odzwierciedla system operacyjny.
esjr
1
Czy próbowałeś tego hacka PPI? stackoverflow.com/questions/279749/… - w zasadzie utwórz ukryty element o szerokości 1 cala, a następnie uzyskaj szerokość w pikselach. To powinno rozwiązać twój główny problem.
JohnLBevan
@JohnLBevan: może to rozwiązać problem z renderowaniem, ale co z analizami dzienników itp.? Główny problem tkwi w naszych przyjaciołach w Cupertino i dążeniu do „rodzimych” aplikacji.
esjr
69

tl; dr Nie kompensuj różnicy między iPadem mini a iPadem 2, chyba że zrekompensujesz także tłuste i chude palce.

Wygląda na to, że Apple celowo próbuje nie dać ci do zrozumienia różnicy. Wygląda na to, że Apple nie chce, abyśmy pisali inny kod dla różnych wersji iPadów. Nie będąc częścią Apple, nie wiem tego na pewno, po prostu mówię, że tak to wygląda. Być może, jeśli społeczność programistów wymyśli fantazyjny detektor dla iPada mini, Apple może celowo złamać ten detektor w przyszłych wersjach iOS. Apple chce, abyś ustawił minimalny docelowy rozmiar na 44 punkty iOS, a iOS wyświetli to w dwóch rozmiarach, większym rozmiarze iPada i mniejszym rozmiarze iPhone / iPad mini. 44 punkty to mnóstwo hojności, a twoi użytkownicy z pewnością będą wiedzieć, czy są na mniejszym iPadzie, więc mogą sami to zrekompensować.

Sugeruję cofnięcie się do podanego powodu proszenia detektora: dostosowanie wielkości docelowej dla wygody użytkownika końcowego. Decydując się na zaprojektowanie jednego rozmiaru na dużym iPadzie i innego rozmiaru na małym iPadzie, decydujesz, że wszyscy mają palce tego samego rozmiaru. Jeśli twój projekt jest na tyle ciasny, że różnica w rozmiarze od iPada 2 i iPada mini robi różnicę, to rozmiar palców między mną a moją żoną będzie miał większą różnicę. Więc zrekompensuj rozmiar palca użytkownika, a nie model iPada.

Mam sugestię, jak zmierzyć rozmiar palca. Jestem natywnym programistą iOS, więc nie wiem, czy można tego dokonać w HTML5, ale oto jak zmierzę rozmiar palca w natywnej aplikacji. Chciałbym, aby użytkownik ściśnął dwa obiekty razem, a następnie zmierzył, jak blisko siebie się zbliżają. Mniejsze palce zbliżą obiekty do siebie i możesz użyć tego pomiaru, aby uzyskać współczynnik skalowania. To automatycznie dostosowuje się do rozmiaru iPada. Ta sama osoba będzie miała większy pomiar punktów na ekranie na iPadzie mini niż na iPadzie 2. W przypadku gry możesz to nazwać krokiem kalibracji, a nawet nie wołać. Niech to będzie początek. Na przykład w grze strzeleckiej gracz wkłada amunicję do pistoletu szczypiącym ruchem.

Pan Berna
źródło
1
Ten pierwszy akapit jest poprawną odpowiedzią. Zalecany docelowy rozmiar 44 punktów jest w porządku.
Ricardo Tomasi
Człowieku, gdybym miał jeszcze tylko tysiąc głosów do oddania. Rzeczywiście pierwszy akapit, wygrałeś internet.
Mike
31

Poproś użytkownika o upuszczenie iPada z kilku tysięcy stóp nad ziemią. Następnie użyj wewnętrznego akcelerometru, aby zmierzyć czas, w którym iPad osiąga prędkość końcową. Większy iPad ma większy współczynnik oporu i powinien osiągnąć prędkość końcową w krótszym czasie niż iPad Mini .

Oto przykładowy kod na początek.

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

Prawie na pewno trzeba ponownie odwiedzić ten kod, gdy Apple nieuchronnie wypuści następnego iPada w innej formie. Ale jestem pewien, że będziesz na bieżąco i utrzymasz ten hack dla każdej nowej wersji iPada.

Jason
źródło
Czy nie powinno to oznaczać „więcej czasu niż iPada mini”?
ThomasW
1
Niezła myśl Galileusza dotyczy współczesnego problemu ... Zastanawiam się, co dalej ...
Matanster
2
Aby uczynić to bardziej niezawodnym, etui na iPada należy usunąć przed upuszczeniem.
Fuhrmanator
28

Niestety w tej chwili wydaje się, że nie jest to możliwe: http://www.mobilexweb.com/blog/ipad-mini-detection-for-html5-user-agent

Dwa dni temu napisałem tweeta o pierwszym wykrytym problemie: „ Potwierdzono, że agent użytkownika iPada Mini jest taki sam jak iPad 2 ”. Otrzymałem dosłownie setki odpowiedzi z informacją, że wąchanie agenta użytkownika to zła praktyka, że ​​powinniśmy wykrywać funkcje, a nie urządzenia itp.

No cóż, chłopaki, macie rację, ale nie ma to bezpośredniego związku z problemem. I muszę dodać drugą złą wiadomość: nie ma techniki po stronie klienta, aby „wykrywanie funkcji” też nie było .

BenM
źródło
8
@ net.uk.sweet - Dlaczego więc nie zmodyfikujesz odpowiedzi i nie naprawisz błędów? A tak przy okazji, angielski w cytowanym tekście nie wydaje się taki zły.
Sandman
@shi, skąd możesz wiedzieć, że autor tego cytowanego tekstu jest Włochem? Nie jestem też native speakerem angielskiego. LOL
Toby D
„nie ma techniki po stronie klienta, aby„ wykrywanie funkcji ”też nie było całkowicie fałszywe. wykrywanie funkcji ! = wykrywanie urządzenia
Ricardo Tomasi,
@Mytic Moon Właśnie przejrzałem oryginalny artykuł, do którego link znajduje się w powyższym poście, w którym znajdują się informacje o autorze.
shi
26

To szalony strzał, ale jedna z różnic między iPadem 2 a iPadem mini polega na tym, że ten pierwszy nie ma żyroskopu 3-osiowego. Być może będzie można użyć interfejsu API orientacji urządzenia WebKit, aby zobaczyć, jakie informacje można z niego uzyskać.

Na przykład ta strona wydaje się sugerować, że możesz tylko uzyskaćrotationRate wtedy, gdy urządzenie ma żyroskop.

Niestety nie mogę dać działającego POC - nie mam dostępu do iPada mini. Być może ktoś, kto wie trochę więcej na temat tych orientacyjnych interfejsów API, może tu dzwonić.

Assaf Lavie
źródło
3
Witryna Apple nie opisuje żyroskopu na iPadzie 2 jako żyroskopu „3-osiowego”; ale kiedy mówią „żyroskop”, mają na myśli konkretny rodzaj części (tak, że twórcy aplikacji opracowujący gry, które wymagają tej części ze względu na możliwości żyroskopu, mogą być pewni, że istnieje i będzie dla nich działać). Jeśli wyszukujesz w Google słowa „żyroskop 3-osiowy” „iPad 2”, znajdziesz wiele artykułów z końca 2010 r. I początku 2011 r., Które mówią o tym, jak iPad 2 wyjdzie z tym samym 3-osiowym żyroskopem, co iPhone 4 już miał: kiedy wyszedł, nie zawiedliśmy się; P.
Jay Freeman -saurik-
Oto, na czym oparłem moją sugestię: apple.com/ipad/ipad-2/specs.html Nie wspomina o żadnym żyroskopie. Tylko „akcelerometr”. Biorąc to pod uwagę i fakt, że ich dokumenty wydają się sugerować, że niektóre urządzenia obsługują tylko podzbiór interfejsu API ruchu, warto spróbować. Zrobiłbym, gdybym miał iPada mini ...
Assaf Lavie
2
Nie, poważnie: w tym samym małym fragmencie co „akcelerometr” jest napisane „żyroskop”. Wydaje mi się, że mogę opublikować zrzut ekranu strony, którą właśnie powiązałeś z wyróżnionym słowem „żyroskop”, ale powinieneś być w stanie go znaleźć za pomocą Ctrl-F. (edytuj: OK, jeśli chodzi o wartość humoru, zrobiłem to: i.imgur.com/8BZhx.png <- widzisz teraz ?; P) Niezależnie od tego, aby położyć jeszcze większy nacisk na „żyroskop 3-osiowy”, jeśli ty przejdź na strony niższego poziomu, które Apple przechowuje w celu uzyskania tego rodzaju informacji w celu uzyskania informacji o wsparciu historycznym, możesz zauważyć, że konkretnie mówi nawet „żyroskop 3-osiowy”. support.apple.com/kb/SP622
Jay Freeman -saurik-
1
Cóż, naprawdę nie ma potrzeby spekulować, czy naprawdę istnieje różnica między możliwościami API ruchu w iPadzie mini i iPadzie 2. To tylko kwestia wypróbowania i zobaczenia. Kto ma tutaj iPada mini? Niezależnie od tego wpadłem na ten pomysł, przeglądając specyfikacje techniczne obu urządzeń i szukając różnic, które można wykryć w HTML / JS. Mogą występować również inne różnice.
Assaf Lavie
20

Cóż, iPad 2 i iPad Mini mają baterie o różnych rozmiarach.

Jeśli iOS 6 Wspiera można uzyskać bieżący poziom baterii z 0.0..1.0użyciem window.navigator.webkitBattery.level. Na pewnym poziomie, zarówno sprzętowym, jak i programowym, jest to prawdopodobnie obliczane jako CurrentLevel / TotalLevel, gdy oba są ints. Jeśli tak, spowoduje to, że liczba zmiennoprzecinkowa będzie wielokrotnością 1 / TotalLevel. Jeśli weźmiesz dużo odczytów poziomu baterii z obu urządzeń i obliczysz battery.level * n, być może uda ci się znaleźć wartość n, w której wszystkie wyniki zaczną być zbliżone do liczb całkowitych, co da ci iPad2TotalLeveli iPadMiniTotalLevel.

Jeśli te dwie liczby są różne i wzajemnie się liczą, wówczas w produkcji można obliczyć battery.level * iPad2TotalLeveli battery.level * iPadMiniTotalLevel. W zależności od liczby całkowitej wskazane zostanie używane urządzenie.

Przepraszamy za liczbę ifs w tej odpowiedzi! Mam nadzieję, że przyjdzie coś lepszego.

Douglas
źródło
18

EDYCJA 1: Moja pierwotna odpowiedź poniżej brzmiała: „nie rób tego”. Aby być pozytywnym:

Myślę, że prawdziwe pytanie nie ma nic wspólnego z iPadem X kontra iPadem mini. Myślę, że chodzi o optymalizację wymiarów elementu interfejsu użytkownika i umieszczenie go pod kątem ergonomii użytkownika. Musisz określić rozmiar palca / palców użytkownika, aby sterować wielkością elementu interfejsu użytkownika i być może pozycjonowaniem. To znowu jest i prawdopodobnie powinno być osiągnięte bez konieczności faktycznego wiedzieć, na jakim urządzeniu pracujesz. Przesadzajmy: Twoja aplikacja działa na ekranie o przekątnej 40 cali. Nie znam marki i modelu ani DPI. Jak oceniasz formanty?

Musisz wyświetlić przycisk, który jest elementem bramkowania do strony / gry. Od ciebie zależy, czy i gdzie to ma sens.

Podczas gdy użytkownik zobaczy to jako pojedynczy przycisk, w rzeczywistości będzie on składał się z matrycy małych ciasno upakowanych przycisków, które są wizualnie zakryte, aby wyglądały jak obraz jednego przycisku. Wyobraź sobie przycisk 100 x 100 pikseli złożony z 400 przycisków, każdy 5 x 5 pikseli. Musisz eksperymentować, aby zobaczyć, co ma sens tutaj i jak małe powinno być twoje próbkowanie.

Możliwy CSS dla tablicy przycisków:

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

I wynikowa tablica:

tablica przycisków

Gdy użytkownik dotknie tablicy przycisków, uzyskasz obraz obszaru kontaktu palca użytkownika. Następnie można użyć dowolnych kryteriów (prawdopodobnie pochodzących z badań empirycznych), aby uzyskać zestaw liczb, których można użyć do skalowania i pozycjonowania różnych elementów interfejsu użytkownika zgodnie z wymaganiami.

Piękno tego podejścia polega na tym, że nie martwisz się już o to, z jaką nazwą urządzenia lub modelem masz do czynienia. Jedyne, na czym Ci zależy, to rozmiar palca użytkownika w stosunku do urządzenia.

Wyobrażam sobie, że ten przycisk sense_array może być ukryty jako część procesu wprowadzania do aplikacji. Na przykład, jeśli jest to gra, może istnieje przycisk „Graj” lub różne przyciski z nazwami użytkowników lub sposób wyboru poziomu, na którym będą grać, itp. Masz pomysł. Przycisk sense_array może znajdować się w dowolnym miejscu, w którym użytkownik musi się dotknąć, aby wejść do gry.

EDYCJA 2: Po prostu zauważam, że prawdopodobnie nie potrzebujesz tylu sensownych przycisków. Zestaw koncentrycznych kół lub przycisków ułożonych jak wielka gwiazdka *może być w porządku. Musisz eksperymentować.

Z moją starą odpowiedzią poniżej podaję obie strony monety.

STARA ODPOWIEDŹ:

Prawidłowa odpowiedź to: nie rób tego. To zły pomysł.

Jeśli twoje guziki są tak małe, że staną się bezużyteczne na mini, musisz je powiększyć.

Jeśli w ogóle nauczyłem się robić natywne aplikacje na iOS, to próbowanie przechytrzenia Apple'a jest formułą na nadmierny ból i pogorszenie. Jeśli zdecydowali się nie pozwalać na identyfikację urządzenia, dzieje się tak, ponieważ w ich piaskownicy nie powinieneś.

Zastanawiam się, czy dostosowujesz rozmiar / lokalizację w pionie czy w poziomie?

martin's
źródło
Czekaj, przeczytałeś pytanie? „niektóre elementy są dostosowywane pod względem wielkości do położenia kciuka lub palca użytkownika”
Christian
Moje pytanie dotyczyło tego, czy OP dostosowuje elementy w oparciu o orientację pionową / poziomą. Przeglądarki internetowe automatycznie dostosują się do dodatkowej szerokości poziomej i wyświetlą całą zawartość większą niż pionowa. Po prostu staram się podkreślić, że - chyba że wszystko zablokujesz - prawie nie ma możliwości optymalizacji dla każdego możliwego urządzenia, orientacji i użytkownika, chyba że piszesz natywną aplikację na iOS. Nawet wtedy możesz być ostrożny przy dokonywaniu wyborów. Czy można to zrobić z aplikacji internetowej i javascript? Prawdopodobnie. Po prostu nie sądzę, że to dobry pomysł.
martin,
O, rozumiem. Interesująca edycja również chętnie zobaczyłaby coś takiego w praktyce.
Christian
1
Czy taka tablica sensowna mogłaby nawet działać? Zakładam, że iOS wybierze dowolną komórkę najbliższą miejsca, w którym dotknął użytkownika, i „kliknie” tylko to, a nie każdą komórkę pod palcem użytkownika. Jeśli to nie praca, to byłoby cholernie ostygnięcia, choć.
HellaMad,
Nie ma powodu, żeby to nie działało. Jest to grupa obiektów, które reagują na zdarzenia dotykowe i wysyłają wiadomości.
martin's
11

Co powiesz na mikroprocesor, oblicz coś, co zajmuje mniej więcej X mikrosekund na iPadzie 2 i Y s na iPadzie mini.

Prawdopodobnie nie jest wystarczająco dokładny, ale może pojawić się instrukcja, w której układ iPada mini jest bardziej wydajny.

Les
źródło
11

Tak, warto sprawdzić żyroskop. Możesz łatwo to zrobić

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

lub coś w tym rodzaju

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

Nie masz żadnych iPadów, aby to przetestować.

lc0
źródło
12
To rozwiązanie nie działa (testowane na iPadzie Mini i iPadzie 2: oba są wykrywane jako „iPad2”) jako 1). Funkcja przyspieszenia zdarzenia jest zaprojektowana, aby działać, jeśli urządzenie ma fantazyjny żyroskop lub tylko starszy akcelerometr i 2) Według strony Apple zarówno iPad Mini, jak i iPad 2 mają fantazyjną część żyroskopu, więc nie ma mowy, aby koncepcja tego testu działała w pierwszej kolejności.
Jay Freeman -saurik-
8

Wymagaj od wszystkich użytkowników agenta użytkownika iPad2 dostarczenia zdjęcia za pomocą wbudowanego aparatu i wykrycia rozdzielczości za pomocą interfejsu API plików HTML . Zdjęcia iPada Mini będą miały wyższą rozdzielczość dzięki ulepszeniom aparatu.

Możesz także pobawić się tworzeniem niewidzialnego elementu canvas i przekonwertować go do formatu PNG / JPG za pomocą Canvas API. Nie mam żadnego sposobu, aby to przetestować, ale wynikowe bity mogą być inne ze względu na podstawowy algorytm kompresji i gęstość pikseli urządzenia.

Vlad Magdalin
źródło
7

Zawsze możesz zapytać użytkownika ?!

Jeśli użytkownik nie widzi przycisków lub treści, daj im możliwość samodzielnego zarządzania skalowaniem. Zawsze możesz wbudować w stronę kilka przycisków skalowania, aby zwiększyć / zmniejszyć zawartość (tekst / przyciski). Byłoby (prawie) gwarantowane, że zadziała dla dowolnej bieżącej rozdzielczości iPada i prawdopodobnie każde przyszłe jabłko zdecyduje, że chce to zrobić.

TK.
źródło
6

To nie jest odpowiedź na postawione pytanie, ale mam nadzieję, że przyda się bardziej niż powiedzenie „nie rób tego”:

Zamiast wykryć iPada Mini, dlaczego nie wykryć, że użytkownik z trudem uderza w kontrolkę (lub: konsekwentnie uderza w podregion kontrolki) i zwiększać / zmniejszać rozmiar kontrolki, aby je dostosować?

Użytkownicy, którzy potrzebują większej kontroli, otrzymują je niezależnie od sprzętu; użytkownicy, którzy nie potrzebują większej kontroli i chcą zobaczyć więcej treści, też to dostają. Nie jest to proste, jak tylko wykrycie sprzętu, i trzeba będzie zrobić kilka subtelnych rzeczy, ale jeśli zrobi się to ostrożnie, może być naprawdę fajnie.

Stephen Canon
źródło
6

To przypomina mi cytat z filmu Równowaga:

„Jak powiedziałbyś, co jest najłatwiejszym sposobem na oderwanie broni od duchownego Grammaton?”

„Prosisz go o to”.

Jesteśmy tak przyzwyczajeni do walki o rozwiązania, kiedy czasem lepiej zapytać. (Istnieją dobre powody, dla których zwykle tego nie robimy, ale zawsze jest to opcja). Wszystkie sugestie są genialne, ale prostym rozwiązaniem może być spytanie przez program, którego iPada używają podczas uruchamiania. .

Wiem, że to dość bezczelna odpowiedź, ale mam nadzieję, że to przypomnienie, że nie musimy walczyć o wszystko. (Przygotowałem się na głosy negatywne.: P)

Kilka przykładów:

  • Wykrywanie klawiatury podczas instalacji systemu operacyjnego czasami nie może wykryć określonej klawiatury, więc instalator musi o to zapytać.
  • Windows pyta, czy sieć, z którą się łączysz, jest siecią domową, czy publiczną.
  • Komputery nie mogą wykryć osoby, która będzie z niej korzystać, dlatego wymagają nazwy użytkownika i hasła.

Powodzenia - mam nadzieję, że znajdziesz niesamowite rozwiązanie! Jeśli tego nie zrobisz, nie zapomnij tego.

jedd.ahyoung
źródło
To może nie być coś, o czym użytkownicy nietechniczni byliby świadomi.
Julian
5

Nie odpowiada na pytanie, ale pytanie leżące u podstaw pytania:

Twoim celem jest poprawa komfortu użytkowania na mniejszym ekranie. Wygląd kontrolek interfejsu użytkownika jest jego częścią. Inną częścią UX jest sposób, w jaki aplikacja reaguje.

Co zrobić, jeśli obszar, który reaguje na dotknięcia, jest wystarczająco duży, aby był przyjazny dla użytkownika na iPadzie Mini, a wizualna reprezentacja elementów sterujących interfejsu użytkownika była wystarczająco mała, aby był przyjemny wizualnie na iPadzie?

Jeśli zebrałeś wystarczającą liczbę dotknięć, których nie było w obszarze wizualnym, możesz zdecydować o wizualnym skalowaniu kontroli interfejsu użytkownika.

Jako bonus działa to również w przypadku dużych rąk na iPadzie.

Laurens
źródło
5

Wszystkie rozwiązania tutaj nie są przyszłościowe (co uniemożliwia Apple wypuszczenie iPada o tym samym rozmiarze ekranu co iPad 2, ale o tej samej rozdzielczości co iPad Mini). Więc wpadłem na pomysł:

Utwórz div o szerokości 1 cala i dołącz do ciała. Następnie tworzę kolejny div o 100% szerokości i dołączam go do ciała:

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

Funkcja jQuery width () zawsze zwraca wartości w pikselach, dzięki czemu można po prostu:

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

screenSize ma teraz rozmiar dostępny dla aplikacji w calach (uważaj jednak na zaokrąglanie błędów). Możesz użyć tego, aby umieścić GUI tak, jak lubisz. Nie zapomnij też później usunąć niepotrzebnych div.

Należy również pamiętać, że algorytm zaproponowany przez Kaspars nie tylko nie zadziała, jeśli użytkownik uruchomi aplikację jako pełny ekran, ale również się zepsuje, jeśli Apple załatwi interfejs użytkownika przeglądarki.

Nie różnicuje to urządzeń, ale jak wyjaśniłeś w swojej edycji, tak naprawdę chcesz wiedzieć, jaki jest rozmiar ekranu urządzenia. Mój pomysł nie powie ci również dokładnie rozmiaru ekranu, ale dostarczy Ci jeszcze bardziej przydatnych informacji, rzeczywistego rozmiaru (w calach), jaki masz do narysowania GUI.

EDYCJA: Użyj tego kodu, aby sprawdzić, czy rzeczywiście działa na twoim urządzeniu. Nie posiadam żadnych iPadów do testowania.

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

Powinno wyskakować okno z rozmiarem ekranu w calach. Wygląda na to, że działa na moim laptopie, zwracając 15.49, podczas gdy ekran mojego laptopa jest sprzedawany jako 15,4 ''. Czy ktoś może to przetestować na iPadzie i opublikować komentarz? Nie zapomnij uruchomić go na pełnym ekranie.

EDIT2: Okazuje się, że strona, na której testowałem, zawierała trochę sprzecznych CSS . Naprawiłem teraz poprawny kod testowy. Potrzebujesz pozycji: absolut na divach, abyś mógł użyć wysokości w%.

EDIT3: Przeprowadziłem pewne badania i wydaje się, że nie ma sposobu na uzyskanie rozmiaru ekranu na żadnym urządzeniu. To nie jest coś, co system operacyjny może wiedzieć. Gdy używasz jednostki rzeczywistego świata w CSS, jest to po prostu oszacowanie oparte na niektórych właściwościach twojego ekranu. Nie trzeba dodawać, że wcale nie jest to dokładne.

Hoffmann
źródło
Przetestowałeś to? Czy 1 cal to tak naprawdę fizyczny 1 cal na Mini i iPadzie? Możliwe, że 1 cal na Mini pokazuje się tylko jako 1/2 cala.
Kernel James,
Testowany na iPadzie 2, 3 i Mini. Wszystkie trzy zwracają 3,8125.
Alfred
@AlfredNerstu wow naprawdę? Czy to znany błąd Safari? Czy możesz przetestować to na safari na Macu?
Hoffmann
@AlfredNerstu przepraszam, że kod był nieprawidłowy, naprawiłem go teraz, strona, na której pierwotnie go testowałem, zawierała trochę sprzecznych CSS, które sprawiły, że trochę działał. Okazuje się, że potrzebujesz pozycji: absolut na div, aby użyć wartości wysokości w%. Teraz ten kod daje mi 15,49 cala na moim laptopie 15,4 '' na „czystej” stronie (bez css i bez elementów oprócz div).
Hoffmann
Próbowałem nowego kodu i teraz wszystkie 2, 3 i Mini wszystkie zwracają 9,5. Uruchomiam kod w jsfiddle, nie wiem czy to może coś zepsuć? Bardziej prawdopodobne jest to, że Safari na iOS jest przeznaczona dla ekranu 9,7 cala i odpowiednio renderuje 1 cal?
Alfred
2

Nie testowano, ale zamiast odtwarzać plik audio i sprawdzać balans, może on słuchać mikrofonu, wyodrębniać szum tła i obliczać jego „kolor” (wykres częstotliwości). Jeśli IPad Mini ma inny model mikrofonu niż IPad 2, to kolor tła powinien być mierzalnie inny, a niektóre techniki odcisków palców audio mogą pomóc ci stwierdzić, które urządzenie jest używane.

Nie sądzę, aby było to możliwe i warte kłopotów w tym konkretnym przypadku, ale myślę, że odcisk palca hałasu w tle może być stosowany w niektórych aplikacjach, na przykład, aby powiedzieć ci, gdzie jesteś, gdy jesteś w budynku.

gb.
źródło
2

Na podstawie pytania Douglasa na temat new webkitAudioContext().destination.numberOfChannelsiPada 2 postanowiłem przeprowadzić kilka testów.

Sprawdzanie liczby kanałów zwróconych 2na iPadzie mini, ale nic na iPadzie 2 z iOS 5, a 2także z iOS 6.

Następnie próbowałem sprawdzić, czy webkitAudioContext jest dostępny

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

To samo tutaj iPad Mini i iPad 2 z iOS 6 zwraca wartość true, podczas gdy iPad 2 z iOS 5 zwraca wartość false.

(Ten test nie działa na komputerze, w przypadku komputera sprawdź, czy webkitAudioContext jest funkcją).

Oto kod do wypróbowania: http://jsfiddle.net/sqFbc/

Alfred
źródło
2

Co się stanie, jeśli utworzysz wiązkę div 1 x 1 i umieścisz je jeden po drugim do div rodzica, dopóki obwiednia nie przeskoczy z 1 cala na 2 cale? Cal na mini ma taki sam rozmiar jak cal na iPadzie, prawda?

Scovetta
źródło
1
Więc próbowałem tego, ale na mini „cal” jest mniejszy niż „cal” na zwykłym iPadzie. Więc ten sposób nie zadziała.
Scovetta,
2

W iOS7 istnieje ogólnosystemowe ustawienie, które użytkownik może dostosowywać: gdy rzeczy stają się zbyt małe, aby je odczytać, ustawienie rozmiaru tekstu można zmienić.

Tego rozmiaru tekstu można użyć do utworzenia interfejsu użytkownika o prawdopodobnych wymiarach, np. Dla przycisku (testowany na iPadzie Mini Retina w celu reagowania na zmiany ustawień rozmiaru tekstu):

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

( przykładowy przycisk CSS, dzięki jsfiddle i cssbuttongenerator)

Srg
źródło
1

Wykrywam iPada mini, tworząc płótno, które jest większe do renderowania przez iPada mini , wypełniając piksel, a następnie odczytując kolor z powrotem. IPad mini odczytuje kolor jako „000000”. wszystko inne renderuje to jako kolor wypełnienia.

Kod częściowy:

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

Potrzebuję tego do zmiany rozmiaru płótna, więc w moim przypadku jest to wykrywanie funkcji.

Systemowa liczba mnoga
źródło