Содержание
- Плотность пикселей, проблема
- Как нативные приложения решают проблему с множественной плотностью пикселей?
- Веб-дизайн 180 - очки наша серебряная пуля?
- Неправильный
- Или: как браузеры научились нарушать спецификации и вводить разработчиков в заблуждение
- Разберись с этим сегодня
- Разберись с этим завтра
- Как изменить ситуацию
Адаптивный дизайн - это сложно.
Взять на себя множество разнообразных устройств с одним интерфейсом - серьезное дело. Медиа-запросы ширины CSS3 позволяют нам адаптировать наш интерфейс для различных размеров экрана. Есть еще много других переменных на разных устройствах, которые влияют на удобство использования нашего интерфейса.
Для всех, кто не знаком с тонкостями плотности пикселей, вы прощены. Только представьте себе все пиксели, которые у вас были на вашем ЭЛТ-мониторе 800x600 из 90-х годов, но втиснутом в 4-дюймовое карманное устройство. Эта плотность прекрасна, если экран находится на расстоянии менее вытянутой руки. Мэтт Брага написал отличное резюме незадолго до выпуска iPhone 4 с дисплеем Retina.
Плотность пикселей, проблема
Сенсорные интерфейсы могут быть красивыми. Удаление прокси-сервера клавиатуры и мыши приближает пользователей к их контенту, позволяя им выполнять действия напрямую, как в реальной жизни.
Чтобы сенсорные интерфейсы были приятными, их сначала нужно использовать. Одно из основных требований - все сенсорные мишени должны быть достаточно большими, чтобы их можно было легко коснуться указательным или большим пальцем. В большинстве руководств по пользовательскому интерфейсу с сенсорным экраном рекомендуется минимальный размер сенсорной мишени от 8 мм до 1 см. Как сделать так, чтобы цели касания оставались больше этого минимального размера при изменении плотности пикселей?
Для получения более подробной информации см. Блестящее исследование Люка Вроблевски за 2010 год.
Как нативные приложения решают проблему с множественной плотностью пикселей?
Разработчики Android получают возможность использовать уникальное устройство для ОС Google. Независимый от плотности пиксель устраняет фрагментацию устройства, поэтому разработчикам не о чем беспокоиться.
Независимый от плотности пиксель эквивалентен одному физическому пикселю на экране с разрешением 160 точек на дюйм, что является базовой плотностью, принятой системой для экрана «средней» плотности. Во время выполнения система прозрачно обрабатывает любое масштабирование единиц dp, если это необходимо, на основе фактической плотности используемого экрана. - документация разработчика Android
Разработчикам iOS, которым не приходилось беспокоиться о плотности пикселей до выхода iPhone 4, рекомендуется использовать точки вместо пикселей, чтобы дисплеи Retina могли масштабировать измерения в два раза.
Веб-дизайн 180 - очки наша серебряная пуля?
Помните единицу pt? Помните, как этим злоупотребляли снова и снова? Очки - это мерка печати! Им нет места в веб-дизайне! Я помню, как бесчисленное количество раз читал, как индустрия пыталась самообразоваться так хорошо, как это получается. Я сам много раз разделял эту точку зрения, размер шрифта в пунктах является непоследовательный. В нашем современном контексте давайте изменим бренд «непоследовательный» на «отзывчивый». Независимая от плотности единица - это именно то, что нам нужно. Мы можем использовать единицы измерения pt, in, cm, mm и pc, чтобы наши цели были удобны для касания повсюду ... Верно?
Верно?
Неправильный
Или: как браузеры научились нарушать спецификации и вводить разработчиков в заблуждение
Послушайте меня на секунду, возьмите линейку и откройте эту тестовую страницу.
Попробуйте измерить эту страницу на своем телефоне, планшете или настольном компьютере. Смущенный? Я тоже. Посмотрите стили на Github, это довольно просто. Я также разместил в галерее несколько фотографий рендеринга модулей на нескольких устройствах. Я опубликую все отправленные вами фотографии тестовой страницы, работающей на вашем устройстве. Отправьте их мне в комментарии или через Twitter.
Разберись с этим сегодня
Скотт Келлум затронул аналогичную тему в статье «Кризис пиксельной идентичности». Он продемонстрировал, как некоторые устройства масштабируют пиксели вверх и вниз, чтобы попытаться добиться единообразия на пиксельных сайтах.
Он также предложил решение, которое обнаруживает и адаптируется к этим устройствам с помощью нестандартного медиа-запроса «-webkit-device-pixel-ratio». Вы можете просмотреть пример кода на Github.
Здорово, что у нас есть решение, позволяющее обойти эту проблему прямо сейчас. Жаль, что это беспорядочно и сложно по сравнению с простой установкой размера в абсолютных единицах, и это очень удобно в будущем. Вам придется постоянно возвращаться и добавлять больше медиа-запросов, чтобы справиться с новыми устройствами с новым соотношением пикселей.
Разберись с этим завтра
Легко жаловаться на нашу ситуацию, когда она нам не нравится. Действительно просто. Так что давайте займемся этим еще раз. У нас есть платформа и стимул получать то, что нам нужно.
Дайте нам инструменты, и мы закончим работу. Сэр Уинстон Черчилль
Браузеры не должны указывать нам, что делать, мы говорим им, что делать. Браузеры хороши только в том случае, если разработчики их хорошо используют. Internet Explorer недавно продемонстрировал прекрасный пример возможностей веб-разработчиков. Microsoft недавно объявила, что Internet Explorer будет автоматически обновляться до последней версии. Я не сомневаюсь, что это произошло из-за того, что веб-разработчики активно отказывались от поддержки старых версий и оставляли этих немногих пользователей с неприятным опытом.
Как изменить ситуацию
- Прочтите книгу Джона Ресига «Ответственность веб-разработчика», чтобы узнать, как правильно составить отчет об ошибке.
- Зарегистрируйте ошибку в Webkit, чтобы устранить проблему в корне.
- Сообщите об ошибке в Google Chrome.
- Отправьте отчет об ошибке в Apple.
- Отправьте отчет об ошибке для Android.
Вы можете проверить блестящую работу «Переместить Интернет вперед», чтобы получить еще больше советов и ресурсов для регистрации ошибок.
