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

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

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

Я определяю 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);

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

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

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

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

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

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

На основании вопроса Дугласа о 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/

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

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

Все решения здесь не предназначены для будущего (что не позволяет 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, чтобы вы могли использовать высоту в%.

РЕДАКТИРОВАТЬ3: Я провел некоторые исследования, и, кажется, нет никакого способа на самом деле получить размер экрана на любом устройстве. Это не то, что ОС может знать. Когда вы используете модуль реального мира в CSS, это на самом деле просто оценка, основанная на некоторых свойствах вашего экрана. Излишне говорить, что это совсем не точно.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 111 Mini .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

"

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

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

Как насчет микропроцессора, рассчитайте что-то, что занимает примерно 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 предоставили фотографию , используя встроенную камеру , и определите разрешение с помощью HTML File API . iPad Mini фото будет иметь более высокое разрешение из-за улучшений в камере.

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

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

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

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

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

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

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

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