Виявити iPad Mini в HTML5


376

Apple iPad Mini - це менший клон iPad 2 набагато більше, ніж ми хотіли б. В JavaScript window.navigatorоб’єкт виставляє однакові значення для Mini та iPad 2. Мої тести досі для виявлення різниці не привели до успіху.

Чому це важливо?

Оскільки екрани iPad Mini та iPad 2 однакові за пікселями, але різняться за фактичним розміром (дюйми / сантиметри), вони різняться в ІР (пікселів на дюйм).

Щоб веб-додатки та ігри пропонували дружній користувальницький інтерфейс, певні елементи регулюються за розміром щодо розміру пальця або пальця користувача, таким чином, ми можемо захотіти масштабувати певні зображення або кнопки, щоб забезпечити кращу роботу користувача.

Що я намагався до цього часу (включаючи деякі досить очевидні підходи):

  • window.devicepixelratio
  • Ширина елемента CSS в одиниці см
  • CSS-медіа-запити (наприклад, resolutionта -webkit-device-pixel-ratio)
  • SVG-малюнки в подібних одиницях
  • Робити всілякі перетворення веб-файлів CSS за встановлений час та рахувати візуалізовані кадри requestAnimFrame(я сподівався виявити відмірну різницю)

Я свіжий від ідей. Як щодо тебе?

Оновити Спасибі за відповіді поки що. Я хотів би прокоментувати людей, які голосують проти виявлення iPad mini проти 2, оскільки Apple має uhm, одне керівництво, щоб керувати ними. Гаразд, ось моє міркування, чому я вважаю, що це дійсно має сенс у світі знати, чи людина користується iPad mini або 2. І зробіть з моїх міркувань те, що вам подобається.

IPad mini - це не тільки набагато менший пристрій (9,7 дюйма проти 7,9 дюйма), але його форм-фактор дозволяє по-різному використовувати. IPad 2 зазвичай тримається двома руками під час ігор, якщо ви не Чак Норріс . Міні є меншим, але він також набагато легший і дозволяє проводити геймплей там, де ви тримаєте його в одній руці, а іншу проводите пальцем або торкаєтесь чи що. Як сам конструктор ігор і розробник, я просто хотів би знати, чи це міні, щоб я міг вибрати, щоб надати гравцеві іншу схему управління, якщо я хочу (наприклад, після тестування A / B з групою гравців).

Чому? Що ж, це підтверджений факт, що більшість користувачів прагнуть використовувати налаштування за замовчуванням, тому залишаючи віртуальну мініатюрну клавішу та встановлюючи на екрані якийсь інший елемент управління на основі дотику (просто даючи тут довільний приклад), коли плеєр завантажує гра в перший раз, що я, і , можливо , інші дизайнери гри, дуже хотілося б, щоб бути в змозі зробити.

Таким чином, IMHO це виходить за рамки густого обговорення пальців / рекомендацій, і це лише те, що Apple і всі інші постачальники повинні зробити: дозвольте нам однозначно ідентифікувати ваш пристрій і думати інакше, а не дотримуватися вказівок.


гарне запитання .. навіть я шукав рішення. Нічого не знайшли в Інтернеті
AnhSirk Dasarp

4
Найкраще - подати помилку з яблуком bugreporter.apple.com Якщо це зробить достатньо людей, є надія, що вони нас почують. Нинішня ситуація є досить огидною.
Вільям Йокуш

Не можете використовувати співвідношення пікселів -webkit-min-device-pixel:? Що стосується iPhone 4 mobilexweb.com/blog/…
Bgi


1
Хм, а як же слідкувати за HIG, а не намагатися це зробити? Це марна трата часу і сил, і щиро мені стало нудно читати це. Чому люди не можуть робити речі правильно?
Елланд

Відповіді:


253

Відтворіть стерео-аудіофайл та порівняйте відповідь акселерометра, коли гучність на правому каналі та на лівому каналі велика - iPad2 мав монодинаміки, тоді як iPad Mini має вбудовані стереодинаміки.

Потрібна ваша допомога для збору даних, будь ласка, відвідайте цю сторінку та допоможіть мені зібрати дані для цієї шаленої ідеї. У мене немає iPad mini, тому мені дуже потрібна ваша допомога


35
Ви не вважаєте, що пристрій, що видає звук під час відвідування веб-сайту, є поганою ідеєю? Не кажучи вже про те, що люди можуть мати свій пристрій безшумно. Жоден звук не зупинить цього.
flexd

6
Як невелика зміна цього: Відтворюйте стереозвуковий файл, де правий канал є перевернутою версією лівого каналу. За допомогою одного динаміка вони повинні скасувати і не впливати на акселерометр. Але в будь-якому випадку, покладатися на колонки + акселерометр - це супер ненадійно.
Кевін Енніс

4
Комусь справді потрібно реалізувати це рішення та показати результати.
Стівен Ейлерт

14
Що стосується цих версій на iPad2, що new webkitAudioContext().destination.numberOfChannelsповертається?
Дуглас

3
@flexd Ви не вважаєте, що виявлення пристроїв - це погана ідея?
Рікардо Томасі

132

Оновлення: Схоже, ці значення повідомляють про ширину та висоту вікна перегляду під час створення вкладки, і вони не змінюються при обертанні, тому цей метод не можна використовувати для виявлення пристрою !

Ви можете використовувати будь-який screen.availWidthабо screen.availHeightяк вони здаються різними для iPad Mini та iPad 2.

iPad Mini

screen.availWidth = 768
screen.availHeight = 1004

iPad 2

screen.availWidth = 748
screen.availHeight = 1024

Джерело: http://konstruktors.com/blog/web-design/4396-detect-ipad-mini-javascript/


3
Поки що це виглядає як найкраще безкомпромісне рішення.
Морган Уайльд

Мені цікаво про цю різницю. Я думав, що обидва використовують однакову роздільну здатність? Чи відрізняється хром Safari на цих двох пристроях?
Марк

10
Це детектор кількості відкритих вкладок. На моєму iPad 3 він повідомляє про різні значення, коли у мене відкрито більше одного крана, що відповідає звітам на екрані. У міні-екрані iPad є два відкриті вкладки, тоді як у iPad 2 є лише один. Мій iPad 3 повідомляє про відповідні значення, коли у мене відкрита одна або дві вкладки.
Містер Берна

7
Ні, це не детектор кількості відкритих вкладок: це детектор того, яку орієнтацію відкрив пристрій, коли вперше "використовувалася" вкладка для завантаження цієї сторінки. Я не впевнений, чи це тому, що розмір вікна перегляду насправді тепер фіксується на цьому значенні після обертання вкладки, або якщо його просто десь неправильно кешують, але якщо ви сидите навколо та граєте з декількома вкладками в різних обертаннях Конфігурації ви можете бачити, як вона співвідноситься. Цікаво, що якщо переключити вкладки, повернути, а потім повернутися до попередньої вкладки та перезавантажити, вона оновлюється.
Джей Фріман -саурік-

1
Так, Джей, я зробив подібну помилку, неправильно приписуючи результат неправильній причині. Але моє неявне твердження стверджує, що це не детектор для iPad mini, оскільки це дасть помилкові позитивні результати на інших iPad.
Містер Берна

84

Я розумію, це може бути дещо низькотехнологічним рішенням, але оскільки ми, здається, ще нічого не можемо придумати ..

Я припускаю, що ви вже перевіряєте більшість інших пристроїв, тому я бачу можливі наступні сценарії.

Ви можете перевірити ВСІ можливі найпопулярніші пристрої, для яких потрібен спеціальний CSS / розмір, і якщо він не відповідає жодному з тих, або припускають, що це iPad mini, або просто запитати користувача?

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

Я знаю, що зараз може здатися дурним підходом, але якщо в даний час ми не можемо вирішити, чи пристрій є iPad mini або iPad 2, принаймні веб-сайт може бути використаний на пристроях iPad mini, які роблять щось подібне.

Ви навіть можете щось подібне:

"Щоб забезпечити вам найкращий досвід перегляду, ми намагаємось виявити тип вашого пристрою, щоб налаштувати веб-сайт до вашого пристрою. На жаль, через обмеження це не завжди можливо, і ми не можемо визначити, чи використовуєте ви iPad 2 або iPad міні, використовуючи ці методи.

Для кращого можливого перегляду, виберіть нижче, який пристрій ви використовуєте.

Цей вибір буде збережено для майбутніх відвідувань веб-сайту на цьому пристрої.

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

"

Я не зовсім знайомий з тим, що ви можете і що не можете робити на стороні клієнта в Javascript. Я знаю, що ви можете отримати IP-адресу користувача, але чи можна отримати mac-адресу користувача? Чи відрізняються ці діапазони між iPad2 та iPad mini?


25
Я дуже згоден з цим рішенням. Дозволити користувачеві вибирати (а також потенційно змінювати) свій пристрій краще, ніж замикати їх у тому, що, на вашу думку, вони хочуть. Якщо ви можете визначити пристрій досить точно; використовувати це як за замовчуванням, але я думаю, що ви завжди повинні пропонувати вибір - навіть якщо він схований у меню налаштувань.
Ліам Ньюмарш

2
@LiamNewmarch Я також є великим прихильником здогадів та оперативного користувача, а не припускати переваги користувачів та заблокувати їх. Іноді я хочу використовувати настільний сайт на своєму iPad. Зазвичай я хочу використовувати англійську версію сайту, незалежно від того, де проклята база даних IP-to-Geo говорить, що я зараз географічно розташований! у вас є мій виклик, сер.
Ребекка

7
Однак рекомендую не використовувати спливаюче питання. зробіть банер, як це робиться, коли він автоматично входить в систему. Таким чином, користувач може просто прочитати сторінку, якщо їм не важливо відповісти, а не бути вимушеним зі свого розуму відповісти на запитання.
Майкл Аллен

1
Задаючи запитання користувачів, ви погіршуєте користувацький досвід, достатній для Apple, щоб здійснити зміни, оскільки це дуже важливе значення.
JiminyCricket

9
-1: Я ненавиджу сторінки, які задають мені питання, коли я відвідую їх. Моя відповідь: "Кому все одно, просто покажи мені зміст!". Різниця між iPad2 та iPad mini недостатньо велика (IMnsHO), щоб гарантувати такий підхід. JS так, питань немає.
johndodo

74

Я знаю, що це жахливе рішення, але на даний момент єдиний спосіб розмежувати iPad Mini від iPad 2 - це перевірити його номер складання та зіставити кожен номер збірки за допомогою відповідного пристрою.

Дозвольте навести приклад: iPad mini, версія 6.0, виставляє " 10A406" як номер складання, тоді як iPad 2 виставляє " 10A5376e".

Це значення можна легко отримати через регулярний вираз на агенті користувача ( window.navigator.userAgent); це число є префіксом " Mobile/".

На жаль, це єдиний однозначний спосіб виявити iPad Mini; Я б запропонував застосувати viewportвідповідний підхід (де він підтримується, використовуючи vh / vw одиниці) для належного відображення вмісту на різних розмірах екрана.


5
Номер збірки дійсно є ключовим, але я помітив, що номер збірки може відрізнятися залежно від країни, в якій було придбано пристрій. Наприклад, у Греції номер збірки iPad 2 виглядає як 10A403 замість 10A5376e, що я також бачив від американського iPad 2. Я здогадуюсь, номер виготовлення для міні також може відрізнятися.
esjr

67
Це рішення невірно. Для певного контексту: "номер збірки" описує операційну систему, а не апаратне забезпечення. Тепер, якщо на різних пристроях завжди були різні версії ОС, це було б добре, але це було справедливо лише в минулому для першого випуску ОС, який постачався з кожним новим пристроєм. У цьому випадку 10A406 - це номер складання 6,0 для iPad Mini, а 10A403 - номер складання 6,0 для iPad 2 ( не 10A5376e, що було 6,0 бета-4). Однак кількість збірок 6.0.1 для обох вже 10A523, тому поточна збірка вже однакова, і майбутні збірки продовжуватимуть існувати.
Джей Фріман -саурік-

1
Я боюся, що Джей правильно, перевірив мої дані (такі, як це є): номер збірки відображає ОС.
esjr

1
Ви спробували цей злом PPI? stackoverflow.com/questions/279749/… - в основному створити прихований елемент шириною 1 дюйм, а потім отримати ширину в пікселях. Це повинно вирішити вашу кореневу проблему.
JohnLBevan

@JohnLBevan: це може вирішити проблему візуалізації, а як щодо аналізу журналів тощо? Основна проблема полягає в наших друзях в Купертіно і поштовху до «рідних» додатків.
esjr

69

tl; dr. Не компенсуйте різницю між iPad mini та iPad 2, якщо ви також не компенсуєте між жирними та худими пальцями.

Здається, Apple навмисно намагається не дати вам сказати про різницю. Здається, Apple не хоче, щоб ми писали різний код для різних розмірів версій iPad. Сам не буду частиною Apple, я цього точно не знаю, я просто кажу, що це виглядає так. Можливо, якщо спільнота розробників придумає фантазійний детектор для iPad mini, Apple може навмисно зламати цей детектор у майбутніх версіях iOS. Apple хоче, щоб ви встановили мінімальний цільовий розмір до 44 балів iOS, і iOS покаже, що у двох розмірах - більший розмір iPad і менший розмір iPhone / iPad mini. 44 бали є щедрими, і ваші користувачі, безумовно, знають, чи є вони на меншому iPad, тому можуть компенсувати самостійно.

Я пропоную відступити до вашої заявленої причини, щоб попросити детектор: коригування розміру цілі для комфорту кінцевого користувача. Вирішивши розробити один розмір на великому iPad та інший розмір на маленькому iPad, ви вирішили, що всі люди мають однакові розміри пальців. Якщо ваш дизайн достатньо жорсткий, що різниця в розмірах від iPad 2 та iPad mini має значення, ніж розмір пальців між мною і моєю дружиною матиме більше значення. Тож компенсуйте розмір пальця користувача, а не модель iPad.

У мене є пропозиція щодо вимірювання розміру пальця. Я рідний розробник iOS, тому не знаю, чи можна це досягти в HTML5, але ось як я міряв би розмір пальця в нативній програмі. Я б змусив користувача стиснути два об’єкти разом, а потім виміряти, наскільки вони близькі. Менші пальці зближуватимуть об'єкти між собою, і ви можете використовувати це вимірювання для отримання коефіцієнта масштабування. Це автоматично регулює розмір iPad. Ця ж людина буде мати більші вимірювання точок екрана на iPad mini, ніж на iPad 2. Для гри ви можете назвати цей крок калібрування або навіть не викликати. Нехай це стане початковим кроком. Наприклад, у грі з стріляниною гравцеві слід пощипувати рушницю в гармати.


1
Цей перший абзац - правильна відповідь. Рекомендований розмір цілі в 44 бали ідеально чудовий.
Рікардо Томасі

Людина, Якби у мене було лише тисячу більше голосів. Перший абзац - це справді, ви виграли Інтернет.
Майк

31

Попросіть користувача скинути свій iPad з декількох тисяч футів над землею. Потім використовуйте внутрішній акселерометр для вимірювання часу, необхідного iPad для досягнення термінальної швидкості. Більш великий iPad має більший коефіцієнт перетягування і повинен досягти термінальної швидкості за менший час, ніж iPad Mini .

Ось приклад коду для початку роботи.

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

Вам майже напевно потрібно переглянути цей код, коли Apple неминуче випустить наступний iPad в іншому форм-факторі. Але я впевнений, що ви будете залишатись над речами та підтримувати цей злом для кожної нової версії iPad.


Чи не повинно це бути "більше часу, ніж iPad mini"?
ThomasW

1
Гарна думка Галілео-іш застосована до сучасної проблеми .... Цікаво, що далі ..
matanster

2
Щоб зробити це більш надійним, корпуси iPad слід зняти до краплі.
Фурманатор

28

На жаль, наразі здається, що це неможливо: http://www.mobilexweb.com/blog/ipad-mini-detection-for-html5-user-agent

Два дні тому я написав твіт про першу виявлену проблему: " Підтверджено, що користувацький агент iPad Mini такий же, як і iPad 2 ". Я отримав буквально сотні відповідей, які говорять про те, що нюхання агента користувача - це погана практика, що ми повинні виявляти функції, а не пристрої тощо тощо.

Ну так, хлопці, ви праві, але це не має прямого зв'язку з проблемою. І мені потрібно додати другу погану новину: не існує жодної методики на стороні клієнта, щоб зробити так само «виявлення функцій» .


8
@ net.uk.sweet - Тоді чому б ти не відредагувати відповідь та виправити помилки? І btw, англійська мова в цитованому тексті не здається такою поганою.
Пісочниця

@shi як ти можеш знати, що автор цього цитованого тексту є італійцем? Я також не є носієм англійської мови. Лол
Toby D

"не існує жодної методики на стороні клієнта, щоб зробити" виявлення функцій "ні" повністю помилковим. виявлення функції ! = виявлення пристрою
Рікардо Томасі

@Mytic Moon Я щойно переглянув оригінальну статтю, яка пов’язана у вищенаведеному пості, де є інформація про автора.
ши

26

Це дикий знімок, але одна з різниць між iPad 2 та iPad mini полягає в тому, що у першого немає гіроскопа 3-осі. Можливо, можна буде скористатися API орієнтації пристроїв WebKit, щоб побачити, яку інформацію ви можете отримати від нього.

Наприклад, ця сторінка, схоже, говорить про те, що ви можете отримати rotationRateзначення лише в тому випадку, якщо в пристрої є гіроскоп.

Вибачте, що не можу дати робочий POC - у мене немає доступу до iPad mini. Можливо, хтось, хто знає трохи більше про ці орієнтаційні API, може зазивати сюди.


3
Так, веб-сайт Apple не описує гіроскоп на iPad 2 як гіроскоп "3 осі"; але, коли вони кажуть «гіроскоп», вони мають на увазі певний вид частини (такий, що розробники додатків, що розробляють ігри, які вимагають цієї частини за можливостями гіроскопа, можуть бути впевнені, що вона є і буде працювати на них). Якщо ви шукаєте в Google для "3-осьового гіроскопа" "iPad 2" ", ви знайдете численні статті з кінця 2010 та початку 2011 року, в яких розповідається про те, як очікується, що iPad 2 вийде з тією ж тривісною гіроскопною частиною, що і У iPhone 4 вже було: коли він вийшов, ми не розчарувалися; P.
Джей Фріман -саурік-

Це те, на чому я грунтувався на своїй пропозиції: apple.com/ipad/ipad-2/specs.html Тут не згадується жоден гіроскоп. Тільки "акселерометр". Враховуючи це, і той факт, що їхні документи, здається, підказують, що деякі пристрої підтримують лише підмножину API руху, робить це варто спробувати. Я б, якби у мене був iPad mini ...
Ассаф Лав'є

2
Ні, серйозно: там написано "гіроскоп" прямо в тому ж невеликому розділі, що і "акселерометр". Я думаю, я можу розмістити скріншот веб-сторінки, яку ви тільки що пов’язали зі словом "гіроскоп", що виділяється, але ви повинні мати можливість знайти це за допомогою ctrl-F. (відредагувати: ОК, для значення гумору я зробив це: i.imgur.com/8BZhx.png <- бачиш це зараз; перейдіть на сторінки нижчого рівня, які Apple зберігає для подібних речей для історичної довідкової підтримки, ви можете побачити, що в ньому конкретно навіть написано "3-осі гіроскопа". support.apple.com/kb/SP622
Jay Freeman -saurik-

1
Ну, насправді не потрібно спекулювати, чи дійсно є різниця між можливостями API руху в iPad mini та iPad 2. Це лише питання спробувати його і побачити. Отже, у кого тут iPad mini? Незважаючи на те, я прийшов до цієї ідеї, переглянувши технічні характеристики для обох пристроїв та шукаючи відмінності, які можуть бути відчуті в HTML / JS. Можуть бути й інші відмінності.
Ассаф Лав'є

20

Ну а iPad 2 та iPad Mini мають батареї різного розміру.

Якщо iOS 6 підтримує його, ви можете отримати поточний рівень заряду від 0.0..1.0використання window.navigator.webkitBattery.level. На певному рівні або в апаратному, або в програмному забезпеченні це, ймовірно, обчислюється як CurrentLevel / TotalLevel, де обидва є входами. Якщо так, це призведе до поплавця, який є кратним 1 / TotalLevel. Якщо ви приймаєте багато показань рівня акумулятора з обох пристроїв і обчислюєте, battery.level * nви зможете знайти значення n там, де всі результати починають бути близькими до цілих чисел, що дасть вам iPad2TotalLevelіiPadMiniTotalLevel .

Якщо ці два числа різні і взаємно прості, то у виробництві можна обчислити battery.level * iPad2TotalLevelіbattery.level * iPadMiniTotalLevel . Що ближче до цілого числа, то вкаже, який пристрій використовується.

Вибачте за кількість ifs у цій відповіді! Сподіваємось, щось краще відбудеться.


18

РЕДАКЦІЯ 1: Нижче в моїй початковій відповіді було "не робити цього". В інтересах бути позитивними:

Справжнє питання, я думаю, не має нічого спільного з iPad X проти iPad mini. Я думаю, що йдеться про оптимізацію розмірів та розміщення елементів інтерфейсу користувача до ергономіки користувача. Вам потрібно визначити розмір пальця / сек користувача, щоб керувати розміром вашого елемента інтерфейсу та, можливо, його розміщенням. Це, знову ж таки, слід і, мабуть, доходити, не потребуючи насправді знати, на якому пристрої ви працюєте. Давайте перебільшуємо: Ваш додаток працює на діагоналі 40 дюймів. Не знаю марку та модель чи DPI. Як розмістити елементи керування?

Потрібно відобразити на сайті / грі кнопку, яка є елементом ґрати. Я залишаю за вами вирішити, де чи як має сенс це робити.

Хоча користувач побачить це як єдину кнопку, насправді вона буде складатися з матриці невеликих щільно упакованих кнопок, яка візуально покривається, щоб виглядати як зображення однієї кнопки. Уявіть, що кнопка розміром 100 х 100 пікселів складається з 400 кнопок, кожна 5 х 5 пікселів. Вам потрібно поекспериментувати, щоб побачити, що тут має сенс і наскільки має бути малий вибірки.

Можливий CSS для масиву кнопок:

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

І отриманий масив:

кнопковий масив

Коли користувач торкнеться масиву кнопок, ви фактично отримаєте зображення контактної області пальця користувача. Потім ви можете використовувати будь-які критерії, які ви хочете (можливо, отримані емпіричним шляхом), щоб отримати набір чисел, які ви можете використовувати для масштабування та розташування різних елементів інтерфейсу відповідно до ваших потреб.

Краса такого підходу полягає в тому, що ви більше не переймаєтесь тим, якою назвою пристрою чи моделлю ви можете мати справу. Все, що вам цікаво, - це розмір пальця користувача щодо пристрою.

Я б міг уявити, що ця кнопка sense_array може бути прихована як частина процесу входу в додаток. Наприклад, якщо це гра, можливо, є кнопка "Play" або різні кнопки з іменами користувача або засіб вибору, на якому рівні вони будуть грати, і т. Д. Ви отримуєте ідею. Кнопка sense_array може жити в будь-якому місці, де користувач повинен торкнутися, щоб потрапити в гру.

EDIT 2: Просто зазначивши, що вам, мабуть, не потрібно стільки сенсорних кнопок. Набір концентричних кіл або кнопок, розташованих як величезна зірочка* може стати чудовим. Ви повинні експериментувати.

Зі старою моєю відповіддю нижче я даю вам обидві сторони монети.

СТАРИЙ ВІДПОВІДЬ:

Правильна відповідь: Не робіть цього. Це погана ідея.

Якщо ваших кнопок настільки мало, що вони стають непридатними для міні, вам потрібно збільшити ваші кнопки.

Якщо я взагалі чогось навчився робити рідні додатки для iOS, це намагання перехитрити Apple - це формула для невиправданого болю та загострення. Якщо вони вирішили не дозволяти вам ідентифікувати пристрій, це тому, що, ну, в їх пісочниці, ви не повинні.

Цікаво, чи ви коригуєте розмір / розташування в портретному та пейзажному форматі?


Зачекайте, ви прочитали питання? "певні елементи відрегульовані за розміром щодо розміру пальця або пальця користувача"
Крістіан

Моє запитання стосувалося того, чи коригує ОП елементи, засновані на портретній / пейзажній орієнтації. Веб-браузери автоматично підлаштовуються під додаткову ширину пейзажу та візуалізують весь вміст, ніж портрет. Я просто намагаюся зазначити, що - якщо ви не заблокуєте все - майже немає способу оптимізації для кожного можливого пристрою, орієнтації та користувача, якщо ви не пишете нативну програму для iOS. Навіть тоді ви можете бути обережними щодо свого вибору. Чи можна це зробити через веб-додаток та javascript? Мабуть. Я просто не думаю, що це гарна ідея.
Мартін

А, бачу. Цікава редакція теж хотіла б побачити щось подібне на практиці.
Крістіан

1
Чи подібний "масив почуттів" навіть спрацював? Я б припустив, що iOS вибрав би ту клітинку, яка є найближчою до місця, де користувач торкнувся, і лише "натисне" на це, а не кожну клітинку під пальцем користувача. Якби це зробило роботу, це було б досить чортово прохолодно.
HellaMad

Ніякої причини це не спрацювало. Це купа об’єктів, які реагують на події, що торкаються та надсилають повідомлення.
Мартін

11

Що стосується мікро-орієнтиру, обчисліть щось, що займає приблизно X мікросекунд на iPad 2 та Y sec на iPad mini.

Це, мабуть, недостатньо точно, але може бути якась інструкція, на яку чіп iPad mini є більш ефективним.


11

Так, це хороший момент перевірити гіроскоп. Ви легко можете це зробити

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

чи щось подібне

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

Не майте iPad, щоб перевірити його.


12
Це рішення не працює (тестується на iPad Mini та iPad 2: обидва виявляються як "iPad2") як 1) функція event.acleration призначена для роботи, якщо пристрій має або фантазійний гіроскоп, або просто старший акселерометр і 2) за даними веб-сайту Apple, і iPad Mini, і iPad 2 мають вишукану гіроскопну частину, тому немає можливості, щоб концепція цієї перевірки спрацювала в першу чергу.
Джей Фріман -саурік-

8

Потрібно від усіх користувачів з користувальницьким агентом iPad2 надати фотографію за допомогою вбудованої камери та виявити роздільну здатність за допомогою API файлу HTML . Фотографії iPad Mini будуть вищою роздільною здатністю завдяки поліпшенню камери.

Ви також можете пограти зі створенням невидимого елемента полотна та перетворити його в PNG / JPG за допомогою Canvas API. У мене немає ніякого способу перевірити це, але отримані біти можуть бути різними через алгоритм стиснення та щільність пікселів пристрою.


7

Ви завжди можете запитати користувача ?!

Якщо Користувач не бачить кнопок або вмісту, то дайте їм можливість самостійно керувати масштабуванням. Ви завжди можете створити на сайті кілька кнопок масштабування, щоб зробити вміст (текст / кнопки) більшим / меншим. Це буде (майже) гарантовано працювати для будь-якої поточної роздільної здатності iPad, і, ймовірно, будь-яке майбутнє яблучне рішення вирішить, що вони хочуть зробити.


6

Це не є відповіддю на поставлене вами запитання, але я сподіваюся, що це буде корисніше, ніж сказати "не робити цього":

Замість того, щоб виявити iPad Mini, чому б не виявити, що користувач важко натискає на керування (або: послідовно потрапляє в підрегіон управління), а збільшувати / зменшувати розмір елемента керування для їх розміщення?

Користувачі, які потребують більшого контролю, отримують їх незалежно від обладнання; користувачі, які не потребують більшого контролю та хочуть бачити більше вмісту, отримують і це. Це не так просто, як просто виявити обладнання, і знайдуться якісь тонкі речі, але якщо це зробити акуратно, це може бути справді приємно.


6

Це нагадує мені цитату з фільму Рівновага:

"Який, скажете ви, найпростіший спосіб відібрати зброю від духовника граматики?"

"Ви просите його про це".

Ми настільки звикли боротися за рішення, коли іноді може бути краще запитати. (Є вагомі причини, що ми зазвичай цього не робимо, але це завжди варіант.) Усі пропозиції тут є геніальними, але простим рішенням може бути, щоб ваша програма запитала, який iPad вони використовують, коли вони запускають його. .

Я знаю, що це якась нахабна відповідь, але сподіваюся, це нагадування, що нам не доведеться боротися за все. (Я підготував себе за пониження.: P)

Деякі приклади:

  • Виявлення клавіатури під час встановлення ОС іноді не може виявити конкретну клавіатуру, тому інсталятор повинен запитати.
  • Windows запитує, чи мережа, до якої ви підключаєтесь, є домашньою чи загальнодоступною мережею.
  • Комп'ютери не можуть виявити особу, яка збирається ним користуватися, тому їм потрібні ім'я користувача та пароль.

Вдало - сподіваюся, ви знайдете дивовижне рішення! Якщо ви цього не зробите, не забувайте цього.


Це може бути не те, про що невідомі користувачі.
Джуліан

5

Не відповідає на питання, а на питання, що стоїть за цим питанням:

Ваша мета - покращити роботу користувачів на меншому екрані. Зовнішній вигляд елементів управління інтерфейсом є однією з його частин. Інша частина UX - це відповідь програми.

Що робити, якщо ви зробите область, яка реагує на крани, достатньо великою, щоб бути зручною для користувачів на iPad Mini, зберігаючи візуальне представлення елементів керування інтерфейсом, щоб бути візуально приємними для iPad?

Якщо ви зібрали достатню кількість кранів, які не були в зоні зору, ви можете вирішити візуально масштабувати елементи керування користувальницьким інтерфейсом.

Як бонус, це працює і для великих рук на iPad.


5

Всі рішення тут не є надійними (що заважає Apple випустити iPad такого ж розміру екрана, що і iPad 2, але такою ж роздільною здатністю, як і iPad Mini). Тому я придумав ідею:

Створіть div з шириною 1 дюйм та додайте його до тіла. Потім я створюю ще один div зі 100% шириною і додаю його до тіла:

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

Функція jQuery width () завжди повертає значення в пікселях, щоб ви могли просто:

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

screenSize тепер утримує розмір, доступний для програми в дюймах (однак, остерігайтеся округлення помилок). Ви можете використовувати це, щоб розмістити свій графічний інтерфейс так, як вам подобається. Також не забудьте потім видалити непотрібні діви.

Також зауважте, що алгоритм, запропонований компанією Kaspars, не тільки не працюватиме, якщо користувач запустить програму як повноекранний, але й зламається, якщо Apple виправить інтерфейс браузера.

Це не відрізнятиме пристрої, але, як ви пояснили в редакції, те, що ви насправді хочете знати, - це розмір екрана пристрою. Моя ідея також не розкаже вам точно про розмір екрана, але він дасть вам ще більш корисну інформацію, фактичний розмір (в дюймах), який у вас є для малювання вашого GUI.

РЕДАКТУВАННЯ: Використовуйте цей код, щоб перевірити, чи він працює на вашому пристрої. У мене немає жодних iPad, щоб перевірити його.

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

Він повинен спливати вікно з розміром екрана в дюймах. Здається, працює на моєму ноутбуці, повертаючи 15,49, тоді як екран мого ноутбука продається як 15,4 ''. Чи може хтось перевірити це на iPad та залишити коментарі? Не забудьте запустити його на весь екран.

EDIT2: Виявляється, на сторінці, в якій я її тестував, була якась суперечлива CSS . Я виправив тестовий код, щоб він працював зараз. Вам потрібна позиція: абсолютна на дівах, щоб ви могли використовувати висоту у%.

EDIT3: Я провів деякі дослідження, і, здається, немає можливості реально отримати розмір екрану на будь-якому пристрої. Це не те, що ОС може знати. Коли ви використовуєте одиницю реального світу в CSS, це насправді лише оцінка, що базується на деяких властивостях вашого екрана. Зайве говорити, що це зовсім не точно.


Ви перевірили? Невже 1 дюйм справді однаковий фізичний 1 дюйм для Mini та iPad? Можливо, що 1 дюйм у Mini відображається лише як 1/2 дюйма.
Кернел Джеймс

Тестували на iPad 2, 3 та Mini. Усі три повертаються 3.8125.
Альфред

@AlfredNerstu вау насправді? Це помилка Safari? Чи можете ви протестувати його на сафарі для mac?
Гофманн

@AlfredNerstu вибачте, що код був невірним, я виправив його зараз, на сторінці, на якій я спочатку його тестував, були деякі конфліктні CSS, які змусили його щось працювати. Виявляється, вам потрібна позиція: абсолютний на діві, щоб використовувати значення висоти у%. Тепер цей код дає мені 15,49 дюймів на моєму 15,4-дюймовому ноутбуці на "чистій" сторінці (без css і ніяких елементів, крім divs).
Гофманн

Я спробував новий код, і тепер усі 2, 3 і Mini повертають 9.5. Я запускаю код у jsfiddle, не знаю, чи може це щось зіпсувати? Більше ймовірним є те, що Safari на iOS зроблений для 9,7-дюймового екрану і відповідно рендерінгу становить 1 дюйм?
Альфред

2

Не тестується, але замість відтворення аудіофайлу та перевірки балансу він може працювати для прослуховування мікрофона, вилучення фонового шуму та обчислення його "кольору" (графік частоти). Якщо IPad Mini має іншу модель мікрофона, ніж IPad 2, то колір їхнього фону повинен бути помірно різним, і деякі методи аудіо відбитків пальців можуть допомогти вам визначити, який пристрій використовується.

Я серйозно не думаю, що це може бути доцільним і вартим клопоту в цьому конкретному випадку, але я думаю, що дактилоскопічний фоновий шум може використовуватися в деяких додатках, наприклад, щоб сказати вам, де ви знаходитесь, коли знаходитесь у будівлі.


2

На основі запитання Дугласа про new webkitAudioContext().destination.numberOfChannelsiPad 2 я вирішив провести кілька тестів.

Перевірка номераOfChannels повернулася 2на iPad mini, але нічого на iPad 2 з iOS 5, а 2також на iOS 6.

Потім я спробував перевірити, чи доступний webkitAudioContext

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

Те саме тут iPad Mini та iPad 2 із iOS 6 повертає справжнє значення, тоді як iPad 2 із iOS 5 повертає помилки.

(Цей тест не працює на робочому столі, щоб перевірити, чи webkitAudioContext є функцією).

Ось код, який ви можете спробувати: http://jsfiddle.net/sqFbc/


2

Що робити, якщо ви створили купу шифрів 1 "x1" і додали їх по черзі до батьківського діла, доки обмежувальне поле не перескочило з 1 дюйма на 2 дюйма? Сантиметр міні - такий же розмір, як і дюйм на iPad, правда?


1
Тому я спробував це, але на міні "дюйм" менший, ніж "дюйм" на звичайному iPad. Тож цей спосіб не працюватиме.
Сковетта

2

В iOS7 є налаштування для загальних систем, які користувач може налаштувати: коли речі стають занадто маленькими для читання, налаштування розміру тексту можна змінити.

Цей розмір тексту може бути використаний для формування інтерфейсу правдоподібних розмірів, наприклад, для кнопки (протестована на iPad Mini Retina, щоб реагувати на зміни параметрів розміру тексту):

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

( зразок кнопки CSS, завдяки jsfiddle та cssbuttongenerator)


1

Я виявляю iPad mini, створюючи полотно більшим розміром iPad mini, може заповнити піксель, а потім прочитати колір назад. IPad mini читає колір як "000000". все інше представляє його як колір заливки.

Частковий код:

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

Мені потрібно це для розміру полотна, щоб це було виявлення функцій у моєму випадку використання.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.