Обнаружение iPad Mini в HTML5

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

Почему это важно?

Поскольку экраны iPad Mini и iPad 2 идентичны в пикселях, но меняются в реальном размере (дюймы/сантиметры), они различаются в PPI (пиксели на дюйм).

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

Вещи, которые я пробовал до сих пор (включая некоторые довольно очевидные подходы):

window.devicepixelratio
Ширина элемента CSS в единицах cm
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 и все другие производители: позвольте нам однозначно идентифицировать ваше устройство и думать иначе вместо .

Ответ 1

Воспроизведите стереофонический аудиофайл и сравните реакцию акселерометра, когда громкость звука на правом канале и на левом канале - iPad2 имеет монодинамики, тогда как iPad Mini имеет встроенные стереодинамики.

Вам нужна помощь для сбора данных, пожалуйста, посетите эту страницу и помогите мне собрать данные для этой сумасшедшей идеи. У меня нет iPad mini, поэтому мне действительно нужна ваша помощь.

Ответ 2

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

Вы можете использовать либо 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

Я понимаю, что это может быть немного низкотехнологичное решение, но поскольку мы пока не можем придумать что-нибудь еще.

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

Вы можете проверить ВСЕ возможные самые популярные устройства, которым требуется специальный 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-устройствами, которые делают что-то вроде этого.

Вы можете даже пойти с чем-то вроде этого:

"Чтобы предоставить вам наилучший опыт просмотра, мы пытаемся определить ваш тип устройства, чтобы настроить веб-сайт на ваше устройство. К сожалению, из-за ограничений это не всегда возможно, и мы не можем в настоящее время определить, используете ли вы iPad 2 или iPad mini, используя эти методы.

Для наилучшего просмотра возможностей просмотра выберите, какое устройство вы используете ниже.

Этот выбор будет сохранен для будущих посещений веб-сайта на этом устройстве.

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

Я не совсем понимаю, что вы можете и не можете делать на стороне клиента в Javascript. Я знаю, что вы можете получить IP-адрес пользователя, но возможно ли получить MAC-адрес пользователя? Эти диапазоны отличаются между iPad2 и iPad mini?

Ответ 4

Я знаю, что это ужасное решение, но на данный момент единственный способ разделить iPad Mini и iPad 2 - проверить его номер сборки и сопоставить каждый номер сборки с соответствующим устройством.

Позвольте мне привести пример: iPad mini, версия 6.0, раскрывает "10A406" как номер сборки, в то время как iPad 2 разоблачает "10A5376e".

Это значение можно легко получить с помощью регулярного выражения в пользовательском агенте (window.navigator.userAgent); это число имеет префикс "Mobile/".

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

Ответ 5

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

Apple, похоже, намеренно пытается не дать вам сказать разницу. Apple, похоже, не хочет, чтобы мы писали другой код для разных версий iPads. Не будучи частью Apple сам, я не знаю этого точно, я просто говорю, что это то, что кажется. Возможно, если сообщество разработчиков придумает фантастический детектор для iPad mini, Apple может намеренно сломать этот детектор в будущих версиях iOS. Apple хочет, чтобы вы установили минимальный целевой размер в 44 точки iOS, и iOS отобразит это в двух размерах, более крупном размере iPad и меньшем размере мини-iPhone/iPad. 44 пункта - это много щедрых, и ваши пользователи наверняка узнают, находятся ли они на более мелком iPad, поэтому могут самостоятельно компенсировать.

Я предлагаю вам вернуться к заявленной причине для запроса детектора: настройка размера цели для удобства конечного пользователя. Принимая решение о дизайне для одного размера на большом iPad и другом размере на маленьком iPad, вы решаете, что у всех людей одинаковые пальцы. Если ваш дизайн достаточно плотный, что разница в размере от iPad 2 и iPad mini имеет значение, размер пальцев между мной и моей женой будет иметь большее значение. Так что компенсируйте размер пальца пользователя, а не модель iPad.

У меня есть предложение о том, как измерить размер пальца. Я - родной разработчик iOS, поэтому я не знаю, можно ли это сделать в HTML5, но вот как я бы измерил размер пальца в родном приложении. Я бы попросил пользователя сжать два объекта вместе, а затем измерить, насколько они близки друг к другу. Меньшие пальцы сближают объекты, и вы можете использовать это измерение для получения коэффициента масштабирования. Это автоматически настраивается для размера iPad. У одного и того же человека будет большее измерение на экранных точках на iPad mini, чем на iPad 2. Для игры вы можете назвать этот шаг калибровки или даже не вызвать его. Представьте это как начальный шаг. Например, в игре для стрельбы игрок помещает боеприпасы в пистолет с защемлением.

Ответ 6

К сожалению, на данный момент похоже, что это невозможно: http://www.mobilexweb.com/blog/ipad-mini-detection-for-html5-user-agent

Два дня назад я написал твиттер о первой обнаруженной проблеме: " Это что iPad Mini User Agent совпадает с iPad 2. Ive получил буквально сотни ответов, говорящих, что пользовательский агент обнюхивание - это плохая практика, что мы должны обнаруживать устройства и т.д. и т.д.

Ну да, ребята, вы правы, но у него нет прямых отношений с проблема. И мне нужно добавить вторую плохую новость: нет на стороне клиента, чтобы сделать" обнаружение функции" ни.

Ответ 7

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

Вот пример кода для начала работы.

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

Вам почти наверняка придется пересмотреть этот код, когда Apple неизбежно выпускает следующий iPad в другом форм-факторе. Но я уверен, что вы останетесь на вершине вещей и сохраните этот взлом для каждой новой версии iPad.

Ответ 8

Это дикий выстрел, но одна из отличий между iPad 2 и iPad mini заключается в том, что у первого нет 3-осевого гироскопа. Возможно, будет возможно использовать API ориентации устройства WebKit, чтобы узнать, какую информацию вы можете получить от него.

Например, эта страница кажется, что вы можете получить только значение rotationRate, если устройство имеет гироскоп.

Извините, я не могу дать рабочий POC - у меня нет доступа к iPad mini. Может быть, кто-то, кто знает немного больше об этих API ориентации, может прослушивать здесь.

Ответ 9

Ну, iPad 2 и iPad Mini имеют батареи разных размеров.

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

Если эти два числа отличаются друг от друга и взаимно первичны, то в процессе производства вы можете рассчитать battery.level * iPad2TotalLevel и battery.level * iPadMiniTotalLevel. Какое бы ни было ближе к целому числу, будет указано, какое устройство используется.

Извините за количество ifs в этом ответе! Надеюсь, что-то лучше придет.

Ответ 10

РЕДАКТИРОВАТЬ 1: Мой первоначальный ответ, ниже, был "не делай этого". В интересах быть позитивным:

Реальный вопрос, я думаю, не имеет ничего общего с iPad X против iPad mini. Я думаю, что это касается оптимизации размеров и размещения элементов пользовательского интерфейса для эргономики пользователя. Вам необходимо определить размер пальца пользователя, чтобы управлять размером элемента пользовательского интерфейса и, возможно, позиционированием. Это, опять же, должно быть и должно быть, вероятно, достигнуто без необходимости действительно знать, на каком устройстве вы работаете. Позвольте преувеличивать: ваше приложение работает на 40-дюймовом диагональном экране. Не знаю марку и модель или DPI. Как вы оцениваете элементы управления?

Вам нужно отобразить кнопку, которая является элементом стробирования, в сайт/игру. Я оставлю это для вас, чтобы решить, где и как это имеет смысл сделать это.

Пока пользователь увидит это как одну кнопку, на самом деле он будет состоять из матрицы небольших плотно упакованных кнопок, которые визуально будут отображаться как однократное изображение кнопки. Представьте себе кнопку размером 100 x 100 пикселей, состоящую из 400 кнопок, каждая 5 x 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 может жить в любом месте, где пользователь должен коснуться, чтобы попасть в игру.

РЕДАКТИРОВАТЬ 2: Просто отметим, что вам, вероятно, не нужно, чтобы многие сенсорные кнопки. Набор концентрических кругов или кнопок, расположенных как огромная звездочка *, может отлично справиться. Вы должны экспериментировать.

С моим старым ответом, ниже, я даю вам обе стороны монеты.

OLD ANSWER:

Правильный ответ: не делайте этого. Это плохая идея.

Если ваши кнопки настолько малы, что они становятся непригодными на мини, вам нужно сделать ваши кнопки большими.

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

Интересно, настраиваете ли вы размер/расположение в портрете или пейзаж?

Ответ 11

Да, это хороший момент для проверки гироскопа. Вы можете легко сделать это с помощью

http://developer.apple.com/library/safari/#documentation/SafariDOMAdditions/Reference/DeviceMotionEventClassRef/DeviceMotionEvent/DeviceMotionEvent.html

или что-то вроде

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

Как насчет микро-теста, вычислите что-то, что занимает примерно X микросекунды на iPad 2 и Y sec на iPad mini.

Это, вероятно, недостаточно точно, но может быть какая-то инструкция, что мини-чип iPad более эффективен.

Ответ 13

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

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

Ответ 14

Вы всегда можете спросить пользователя!

Если пользователь не может видеть кнопки или содержимое, дайте им способ управлять самим масштабированием. Вы всегда можете создать несколько кнопок масштабирования на сайте, чтобы сделать контент (текст/кнопки) больше/меньше. Это будет (почти) гарантировано работать для любого текущего разрешения iPad и, возможно, любого будущего решения Apple, решение, которое они хотят сделать.

Ответ 15

Это не ответ на ваш вопрос, как поставленный, но я надеюсь, что это будет более полезно, чем сказать "не делай этого":

Вместо того, чтобы обнаруживать iPad Mini, почему бы не обнаружить, что пользователь с трудом ударяет по элементу управления (или: последовательно попадает в субрегион элемента управления) и увеличивает/уменьшает размер элемента управления для их размещения

Пользователи, которым нужны большие элементы управления, получают их независимо от оборудования; пользователи, которым не нужны более крупные элементы управления и хотят увидеть больше контента, тоже получат это. Это не просто, как просто определение аппаратного обеспечения, и будут некоторые тонкие вещи, чтобы получить право, но если бы это было сделано тщательно, это могло бы быть очень приятно.

Ответ 16

Не отвечая на вопрос, но вопрос, стоящий за вопросом:

Ваша цель - улучшить работу пользователя на меньшем экране. Внешний вид элементов управления пользовательского интерфейса является его частью. Другая часть UX - это то, как приложение реагирует.

Что делать, если вы создадите область, которая реагирует на краны, достаточно большие, чтобы быть удобными на iPad Mini, сохраняя при этом визуальное представление элементов управления пользовательского интерфейса достаточно маленьким, чтобы наглядно видеть iPad?

Если вы собрали достаточное количество кранов, которые не были в визуальной области, вы можете решить визуально масштабировать элементы управления пользовательским интерфейсом.

В качестве бонуса это работает и для больших рук на iPad.

Ответ 17

Это напоминает мне цитату из фильма Равновесие:

"Что, скажете вы, самый простой способ получить оружие от клирика Грамматона?"

"Вы просите его об этом".

Мы так привыкли бороться за решения, когда иногда бывает лучше спросить. (Есть веские причины, по которым мы обычно этого не делаем, но это всегда вариант.) Все предложения здесь блестящие, но простым решением может быть ваша программа спросить, какой iPad они используют, когда они ее запускают.

Я знаю, что это своего рода нахальный ответ, но я надеюсь, что это напоминание о том, что нам не нужно бороться за все. (Я приготовил себя для downvotes.: P)

Некоторые примеры:

Обнаружение клавиатуры во время установки ОС иногда не может обнаружить специфической клавиатуры, поэтому установщик должен спросить.
Windows спрашивает, сеть, к которой вы подключаетесь, - это домашняя сеть или общедоступная сеть.
Компьютеры не могут обнаружить человека, который собирается его использовать, поэтому им требуются имя пользователя и пароль.

Желаем удачи - надеюсь, вы найдете потрясающее решение! Если вы этого не сделаете, не забывайте об этом.

Ответ 18

Все решения здесь не являются надежными для будущего (что мешает 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 теперь имеет размер , доступный для приложения в дюймах (будьте осторожны с закруглением erros). Вы можете использовать это, чтобы разместить свой графический интерфейс так, как вам нравится. Также не забудьте удалить бесполезные divs впоследствии.

Также обратите внимание, что алгоритм, предложенный Kaspars, не только не будет работать, если пользователь запустит приложение как полный экран, но он также сломается, если Apple заплатит пользовательский интерфейс браузера.

Это не будет отличать устройства, но, как вы объяснили в своем редактировании, вы действительно хотите знать размер экрана устройства. Моя идея также не скажет вам точно размер экрана, но это даст вам еще более полезную информацию, фактический размер (в дюймах), который у вас есть, чтобы нарисовать свой графический интерфейс.

EDIT: Используйте этот код, чтобы проверить, действительно ли он работает на вашем устройстве. Я не владею 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. Теперь я исправил тестовый код. Вам нужна позиция: абсолютная на div, поэтому вы можете использовать высоту в%.

EDIT3: Я провел некоторое исследование, и кажется, что нет способа фактически получить размер экрана на любом устройстве. Это не то, что OS может знать. Когда вы используете блок реального мира в CSS, это на самом деле просто оценка, основанная на некоторых свойствах вашего экрана. Излишне говорить, что это не совсем точно.

Ответ 19

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

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

Ответ 20

На основе Douglas вопроса о new webkitAudioContext().destination.numberOfChannels на iPad 2 я решил запустить несколько тестов.

Проверка numberOfChannels вернула 2 на iPad mini, но ничего не было на iPad 2 с iOS 5 и 2, а также с iOS 6.

Затем я попытался проверить, доступен ли webkitAudioContext

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

То же самое здесь iPad Mini и iPad 2 с iOS 6 возвращает true, а iPad 2 с iOS 5 возвращает false.

(Этот тест не работает на рабочем столе, для настольных компьютеров проверяет, есть ли функция webkitAudioContext).

Вот код, который вы можете попробовать: http://jsfiddle.net/sqFbc/

Ответ 21

Что делать, если вы создали кучу 1 "x1" широких div и добавили их один за другим в родительский div, пока ограничительная рамка не перескочила с 1 дюйма до 2 дюймов? Дюйм на мини-таком же размере, как дюйм на iPad, правильно?

Ответ 22

В iOS7 есть системный параметр, который пользователь может настроить: когда вещи становятся слишком маленькими для чтения, можно изменить параметр Размер текста.

Этот размер текста может использоваться для формирования пользовательского интерфейса правдоподобных измерений, например. для кнопки (проверено на iPad Mini Retina, чтобы отреагировать на изменение размера текста):

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

(образец кнопки CSS, благодаря jsfiddle и cssbuttongenerator)

Ответ 23

Я обнаруживаю 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);

Мне нужно это для определения размера холста, чтобы оно обнаруживало функцию в моем случае использования.