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


376

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 и все другие поставщики должны сделать: позволить нам уникально идентифицировать ваше устройство и думать иначе, а не следовать рекомендациям.


хороший вопрос .. даже я искал решение. Ничего не нашел в сети
AnhSirk Dasarp

4
Лучше всего сообщить об ошибке в apple bugreporter.apple.com Если достаточно людей, есть надежда, что они нас услышат. Нынешняя ситуация довольно удручающая.
Уильям Джокуш

Не можете ли вы использовать -webkit-min-device-pixel-ratio:? Что касается 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 мини

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 Chrome на этих двух устройствах?
Марк

10
Это детектор количества открытых вкладок. На моем iPad 3 он показывает разные значения, когда у меня открыто более одного касания, что соответствует отчетам на снимках экрана. Снимок экрана iPad mini имеет две открытые вкладки, а захват 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 говорит, что я в данный момент географически расположен! у вас есть мой upvote, сэр.
Ребекка

7
Рекомендую не использовать всплывающий вопрос, однако. Сделайте баннер, как это делает SO, когда он автоматически входит в систему. Таким образом, пользователь может просто прочитать страницу, если он не хочет отвечать, вместо того, чтобы быть вынужденным ответить на вопрос.
Майкл Аллен

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's. Я предполагаю, что номер сборки для мини также может отличаться.
esjr

67
Это решение неверно. Для некоторого контекста: «номер сборки» описывает операционную систему, а не аппаратное обеспечение. Теперь, если бы разные устройства всегда имели разные сборки ОС, это было бы хорошо, но это было верно только в прошлом для первого выпуска ОС, который шел с каждым новым устройством. В данном случае 10A406 - это номер сборки для 6.0 для iPad Mini, а 10A403 - это номер сборки для 6.0 для iPad 2 ( не 10A5376e, который был 6.0 beta 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 User Agent такой же, как iPad 2 ». Я получил буквально сотни ответов, в которых говорилось, что прослушивание пользовательского агента - плохая практика, что мы должны обнаруживать функции, а не устройства и т. Д. И т. Д.

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


8
@ net.uk.sweet - Тогда почему бы вам не отредактировать ответ и не исправить ошибки? И между прочим, английский в цитируемом тексте выглядит не так уж плохо.
Sandman

@shi откуда ты можешь знать, что автор этого цитируемого текста - итальянец? Я не носитель английского языка. LOL
Тоби Д

«не существует методики на стороне клиента, чтобы сделать« обнаружение функций »ни тем, ни другим», полностью ложным. Обнаружение функции ! = Обнаружение устройства
Рикардо Томази

@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 получит ту же 3-осевую часть гироскопа, что и iPad. iPhone 4 уже был: когда он вышел, мы не были разочарованы;
Джей Фриман-Саурик-

На этом я основал свое предложение: apple.com/ipad/ipad-2/specs.html В нем не упоминается ни один гироскоп. Только «акселерометр». Учитывая это, и тот факт, что их документы, похоже, предполагают, что некоторые устройства поддерживают только подмножество API-интерфейсов движения, стоит попробовать. Я бы, если бы у меня был iPad mini ...
Ассаф Лави

2
Нет, серьезно: там написано "гироскоп" в том же небольшом разделе, что и "акселерометр". Думаю, я могу опубликовать скриншот веб-страницы, на которую вы только что ссылались, с выделенным словом «гироскоп», но вы сможете найти его с помощью ctrl-F. (edit: OK, для значения юмора, я сделал это: i.imgur.com/8BZhx.png <- увидеть сейчас?; P) Независимо от того, чтобы положить разницу «3-осевого гироскопа» еще больше, если вы перейдите на страницы более низкого уровня, которые Apple хранит для такого рода вещей, для исторической поддержки, вы можете увидеть, что в ней даже говорится «3-осевой гироскоп». support.apple.com/kb/SP622
Джей Фриман -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 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 - это формула чрезмерной боли и обострения. Если они решили не позволять вам идентифицировать устройство, это потому, что, ну, в их песочнице, вы не должны.

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


Подожди, ты прочитал вопрос? «Определенные элементы регулируются по размеру относительно положения большого или большого пальца пользователя»
Кристиан

Мой вопрос был о том, настраивает ли OP элементы на основе портретной / альбомной ориентации. Веб-браузеры будут автоматически подстраиваться под дополнительную ширину ландшафта и отображать весь контент больше портретного. Я просто пытаюсь указать на то, что - если вы не заблокируете все - почти нет способа оптимизировать для каждого возможного устройства, ориентации и пользователя, если вы не пишете нативное приложение для iOS. Даже тогда вы можете быть осторожны с выбором, который вы делаете. Может ли это быть сделано из веб-приложения и JavaScript? Вероятно. Я просто не думаю, что это хорошая идея.
Мартин

Ах я вижу. Интересное редактирование тоже было бы интересно увидеть что-то подобное на практике.
Кристиан

1
Будет ли работать такой «массив чувств»? Я бы предположил, что iOS выберет ту ячейку, которая ближе всего к тому месту, к которой прикоснулся пользователь, и только «нажмет» на нее, а не на каждую ячейку под пальцем пользователя. Если бы это сработало, это было бы чертовски круто.
HellaMad

Нет причин, чтобы это не сработало. Это группа объектов, которые реагируют на сенсорные события и отправляют сообщения.
Мартин

11

Что касается микропроцессора, рассчитайте что-то, что занимает примерно X микросекунд на iPad 2 и Y секунд на 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.acceleration предназначена для работы, если на устройстве установлен модный гироскоп или более старый акселерометр и 2) согласно веб-сайту Apple, и iPad Mini, и iPad 2 имеют причудливую часть гироскопа, так что концепция этой проверки не сработала бы в первую очередь.
Джей Фриман-саурик-

8

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

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


7

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

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


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


Вы проверяли это? Действительно ли 1 дюйм - это один и тот же физический 1 дюйм на Mini и iPad? Вполне возможно, что 1-дюймовый на Mini только показывает как 1/2 дюйма.
Ядро Джеймс

Проверено на iPad 2, 3 и Mini. Все три возвращаются 3.8125.
Альфред

@AlfredNerstu вау на самом деле? Это известная ошибка Safari? Можете ли вы проверить это на сафари для Mac?
Хоффманн

@AlfredNerstu извините, что код был неправильным, я исправил это сейчас, на странице, на которой я изначально тестировал, был какой-то конфликтующий CSS, который заставлял его работать. Оказывается, вам нужно положение: абсолютное значение для div, чтобы использовать значения высоты в%. Теперь этот код дает мне 15,49 дюйма на моем 15,4-дюймовом ноутбуке на «чистой» странице (без CSS и элементов, кроме div).
Гофман

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

2

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

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


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/


2

Что, если вы создали группу div с размерами 1 "x1" и добавили их один за другим к родительскому div, пока ограничивающая рамка не переместилась с 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.