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

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

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

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

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

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

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

Я свежий из идей. Как насчет тебя?

Обновление Спасибо за ответы, пока. Я хотел бы прокомментировать людей, которые проголосовали против обнаружения iPad mini против 2, так как у Apple есть единственное правило, чтобы управлять ими всеми. Хорошо, вот мое рассуждение, почему я чувствую, что в мире действительно имеет смысл знать, использует ли человек iPad mini или 2. И делайте со своими рассуждениями то, что вам нравится.

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

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

Так что ИМХО это выходит за рамки обсуждений с рекомендациями и рекомендациями, и это то, что Apple и все другие поставщики должны сделать: позволить нам уникально идентифицировать ваше устройство и думать иначе, а не следовать рекомендациям.

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

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

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

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

Ipad мини

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/

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

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

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

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

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

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

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

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. Для игры вы можете назвать это шагом калибровки или даже не вызывать его. Имейте это в качестве начального шага. Например, в стрелялке игрок должен сунуть боеприпасы в ружье, сжимая их.

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

Вот пример кода, с которого можно начать.

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

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

К сожалению, в настоящее время кажется, что это невозможно: http://www.mobilexweb.com/blog/ipad-mini-detection-for-html5-user-agent

Два дня назад я написал в Твиттере о первой обнаруженной проблеме: « Подтверждено, что IPad Mini User Agent такой же, как iPad 2 ». Я получил буквально сотни ответов, в которых говорилось, что прослушивание пользовательского агента - плохая практика, что мы должны обнаруживать функции, а не устройства и т. Д. И т. Д.

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

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

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

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

Ну, 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 в этом ответе! Надеюсь, что-то лучшее придет.

РЕДАКТИРОВАТЬ 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 может быть скрыта как часть процесса ввода в приложение. Например, если это игра, может быть, есть кнопка «Играть» или различные кнопки с именами пользователей или средство выбора уровня, на котором они будут играть, и т. Д. Вы поняли идею. Кнопка sense_array может жить в любом месте, к которому пользователь должен прикоснуться, чтобы войти в игру.

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

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

СТАРЫЙ ОТВЕТ:

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

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

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

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

Что касается микропроцессора, рассчитайте что-то, что занимает примерно X микросекунд на iPad 2 и Y секунд на iPad mini.

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

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

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, чтобы проверить это.

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

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

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

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

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

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

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

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

«Какой, по-твоему, самый простой способ забрать оружие у клерика Грамматона?»

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

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

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

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

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

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

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

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

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

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

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

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

Также обратите внимание, что алгоритм, предложенный 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 и оставить комментарии, пожалуйста? Не забудьте запустить его на весь экран.

РЕДАКТИРОВАТЬ 2: Оказывается, что страница, на которой я ее тестировал, имела противоречивый CSS . Я исправил тестовый код для правильной работы. Вам нужно position: absolute в div, чтобы вы могли использовать высоту в%.

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

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

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

Исходя из вопроса Дугласа об new webkitAudioContext().destination.numberOfChannelsiPad 2, я решил провести несколько тестов.

Проверка количества возвращаемых каналов 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/

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

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

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

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

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

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

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