Как вы, возможно, знаете, iPad mini — это новый 7,9-дюймовый вариант планшета iPad, и один из самых больших вопросов на сегодняшний день заключается в том, как его обнаружить, используя методы на стороне сервера или на стороне клиента.
У меня для вас плохие новости: это кажется невозможным .
Два дня назад я написал в Твиттере о первой обнаруженной проблеме: « Подтверждено, что пользовательский агент iPad Mini такой же, как iPad 2 ». Я получил буквально сотни ответов, в которых говорилось, что прослушивание пользовательского агента — плохая практика, что мы должны обнаруживать функции, а не устройства и т. Д. И т. Д.
Ну да, ребята, вы правы, но это не имеет прямого отношения к проблеме. И мне нужно добавить вторую плохую новость: на стороне клиента не существует метода, который бы позволял «обнаруживать функции» .
Почему мы должны обнаружить iPad mini в первую очередь
IPad Mini не имеет дисплея Retina — название, которое Apple называет устройствами с высоким разрешением, и это клон iPad 2 с точки зрения разрешения: 768 × 1024 пикселей. Самая большая разница в том, что в то время как iPad 2 составляет 9,7 ″; iPad mini — это 7,9 ″.
Хотя разница между iPad 2 и iPad mini (1,8 дюйма или 4,57 см по диагонали) невелика по сравнению с другими сериями (разница между Nexus 7 и Nexus 10 составляет 3 дюйма), мы должны понимать, что все выглядит на 19% меньше на iPad mini , включая текстовые и сенсорные области. (Обновление: реальная демонстрация этой разницы )
Хорошо вы правы; нам не нужно заботиться об iPad mini и iPad 2 с точки зрения самого устройства, но нам нужно заботиться о разнице в dpi . Дизайнеры должны хотеть сделать некоторые вещи больше, чтобы их можно было правильно прочитать, или чтобы увеличить осязательные области, чтобы избежать проблем с удобством использования.
Вторая причина — аналитика: некоторые компании хотят хранить информацию об устройствах пользователя, чтобы принимать какие-то решения, и в этом случае размер и фактор планшета, или дата выпуска устройства могут быть полезными. Я знаю, что это не большая проблема, но это все еще звучит как проблема для некоторых веб-сайтов и владельцев приложений.
Как обнаружить функцию или устройство
Есть несколько механизмов для обнаружения функций и устройств, и это длинная история. У меня есть полная глава по этой теме во втором издании моей книги «Программирование мобильного Интернета» (доступно сегодня как предварительная версия черновика ).
Мы всегда должны отдавать предпочтение обнаружению функции против обнаружения устройства; но в некоторых конкретных ситуациях обнаружение устройств — единственный путь.
Говоря об обнаружении на стороне сервера, следует использовать пользовательский агент и / или библиотеки устройств, такие как WURFL ScientiaMobile . Пользовательский агент — беспорядок, и нет простого правила, которому нужно следовать, и когда такая компания, как Apple, решает использовать один и тот же пользовательский агент для всех устройств, не существует решения на стороне сервера, которое может помочь нам. В этом конкретном случае все iPad, от первого до четвертого поколения, и iPad Mini используют один и тот же пользовательский агент. Единственная разница — версия для iOS, которая у них есть.
Я знаю, что многие из вас думают: меня не волнует обнаружение на стороне сервера. Хорошая практика после RWD — адаптивный веб-дизайн — это использование медиазапросов или, по крайней мере, JavaScript для обнаружения функций. Что ж, появляются большие плохие новости: нет способа обнаружить уникальные функции iPad mini (т / д, размер экрана в дюймах / см). Посмотрим почему.
Использование разрешения медиазапросов
Медиа-запросы CSS3 включают атрибут разрешения, к которому мы можем обращаться. IPad Mini имеет 163 точек на дюйм разрешение экрана в то время как IPad 2 имеет 132 точек на дюйм. Большой! У нас есть решение… ну, атрибут разрешения недоступен в браузерах на основе WebKit, таких как Safari на iOS. Нет способа использовать это.
Использование соотношения пикселей устройства
После этого мы подумаем о нестандартном расширении медиазапроса: соотношении пикселей устройства. IPad с высоким разрешением предоставляет 2 значения из медиазапросов и JavaScript для отношения пикселей устройства. Итак, iPad Mini, а также iPad 2 имеют значение 1; поэтому мы не можем полагаться и на это свойство.
Использование дюймов или сантиметров
Другое решение о размерах в дюймах (дюймах) или см (сантиметрах). Ну, попробуем нарисовать 10-дюймовый элемент на экране, например, шириной: 10 дюймов ; У меня одинаковые результаты на обоих устройствах (то есть на iPad mini деление на 19% меньше).
ОБНОВЛЕНИЕ: В спецификации CSS3 единицы измерения в дюймах или сантиметрах могут не соответствовать физическому размеру, если якорной единицей является пиксель. Поэтому они бесполезны на этих устройствах.
И iPad 2, и iPad mini демонстрируют одинаковую ширину устройства и высоту устройства в дюймах и сантиметрах (это соответствует значениям пикселей), в то время как мы знаем, что это полностью неверно. Следующий медиа-запрос верен для всех iPad:
only screen and (min-device-width: 8in)И iPad Mini имеет ширину устройства менее 5,3 дюйма, поэтому запрос должен быть ложным, если подумать.
И с размером шрифта и регулировкой шрифта результаты также точно такие же. Для iPad mini нет специальной настройки текста, и он использует те же значения.
Если вы хотите попробовать значения медиазапросов, посетите сайт mediaqueriestest.com или m.ad.ag со своего мобильного устройства.
Apple … почему?
Я знаю, что некоторые из вас найдут некоторые неясные причины, но официальная причина заключается в уменьшении фрагментации iOS . С точки зрения разработчика и дизайнера, у нас есть только два устройства: iPhone (включая iPod touch) и iPad. Это все, что вам нужно знать с точки зрения Apple, чтобы спроектировать и разработать веб-сайт или приложение. Хотя на первый взгляд неплохая идея, iPad mini имеет другой размер экрана, и, по крайней мере, это должно соблюдаться медийными запросами.
Чтобы сделать окончательный вывод, проблема не в том, что мы не можем обнаружить iPad mini; проблема заключается в том, что мы не можем обнаружить его уникальные характеристики, такие как плотность и реальные размеры , которые важны для обеспечения наилучшего опыта работы с каждым устройством, использующим методы адаптивного веб-дизайна.
Решения?
ОБНОВЛЕНИЕ: Люди спрашивали в Твиттере, как справиться с этим. Ну, я могу думать только о некоторых предложениях:
- Не отключайте масштабирование в метатеге области просмотра, например, в пользовательском масштабировании = нет .
- Если у вас есть текст, предложите пользователю возможность увеличивать и уменьшать размер шрифта и сохранять настройки в локальном хранилище или в файле cookie для следующего посещения. Это может быть легко реализовано с помощью JavaScript, и вы можете изменить font-size или -webkit-text-size-Adjust .
Любое другое решение? Не стесняйтесь оставлять комментарий
PS: не поймите меня неправильно … Я пробовал iPad mini, и мне это нравится; он чувствует себя хорошо, и экран гораздо полезнее, чем другие 7 ″ аналогичные планшеты.