0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Почему большие устройства на самом деле маленькие

Содержание

Почему большие устройства на самом деле маленькие

Андрей Подкин

Вы замечали когда-нибудь, что на Android-смартфонах все выглядит крупнее, чем на iPhone в одних и тех же приложениях? А то, что на фаблете все выглядит крупнее, чем на компактном смартфоне, и в результате информации на экране ровно столько же?

Взаимосвязь размера и разрешения экрана

Каждый мобильный аппарат характеризуется ключевыми параметрами. Покупатели, выбирая гаджет, в первую очередь смотрят на размер и производительность. Большинство смартфонов, представленных на рынке, характеризуются диагональю дисплея 4-5.5 дюйма, также встречаются фаблеты и планшетофоны размером 5.6-7 дюймов. У простых бюджетных аппаратов дисплей по диагонали не дотягивает до 4 дюймов.

Многие потенциальные покупатели при покупке устройства могут ошибаться, ориентируясь только на диагональ устройства. Этот параметр, безусловно, нужно учитывать. Но также следует внимательно смотреть и на характеристику «разрешение», от которой напрямую зависит качество отображения. Разрешение экрана означает максимальное количество пикселей (точек) по вертикали и горизонтали, которое он может отражать.

В характеристиках значение этого параметра выписывается в виде двоичной матрицы, определяющей количество пикселей по вертикали и горизонтали: 1280×720 px, например. Именно этот показатель определяет рабочую область дисплея, влияет на качество изображения, как и связанный с ним параметр плотность пикселей (dpi). В настоящее время для Андроид-смартфонов предлагаются несколько популярных разрешений экранов, отвечающие пяти стандартам плотности 160, 240, 320, 480 и 640 dpi. У Айфонов (мобильных аппаратов компании Apple) иные фиксированные размеры дисплеев и взаимосвязанные стандарты. Например, модели iPhone 5, iPhone 5s, iPhone 5c, iPhone SE с 4-х дюймовым экраном имеют разрешение 640×960 px и плотностью 326 dpi. Подробнее размеры экранов Айфонов и их параметры отображены на рисунке ниже.

Как изменить DPI на Android?

Стоит изменять DPI с не большим шагом (10 — 20), так как резко изменив значение, могут возникнуть ошибки в работе операционной системы!

Для того чтобы у вас появилась возможность изменить DPI, вам в любом случае будут нужны root права (кроме первого способа):

Способ 1. Установка DPI без наличия Root прав Android

  1. Установите драйвера Android
  2. Установите программу ADB
  3. Включите «Отладку По USB«
  4. Введите команду в окне ADB
    adb shell wm density XXX где XXX необходимое значение DPI(480, 320).

Если что-то пошло не так, не удается сбросить DPI или изменить на другое значение, то тогда введите команду:

adb shell wm density reset
Перезагрузите Android!

Способ 2. С наличием root, при помощи приложения

Скачайте и установите приложение Textdroid DPI

Запустите установленное приложение и измените на необходимое значение. Далее нажмите на кнопки «Apply» и «Reboot» чтобы изменения вступили в силу.С новой загрузкой у вас будет применены новые настройки плотности экрана DPI.

Способ 3. С наличием Root прав, путем правки файла buid.prop

Запустите приложение Root Browser, найти файл build.prop в папке system и найдите параметр:

ro.sf.lcd_density=

Задайте собственный DPI, сохраните документ и перезагрузите Android.

Как узнать DPI экрана смартфона?

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

При установке ПО из сторонних источников владельцу смартфона в некоторых случаях нужно самостоятельно подбирать файл APK с нужным dpi. По этой причине иногда бывает полезно знать значение данного параметра на своем телефоне. Если текущая плотность пикселей неизвестна, исправить это можно при помощи специальной программы Display Info. После запуска утилиты найти информацию о DPI можно в строке «Density» (рядом с остальными сведениями об экране смартфона).

Зная параметр DPI, нужно скачивать версии программ, которые обладает оптимальными настройками изображения. Выбирать следует файл, где DPI в имени или описании совпадает с тем, что показала утилита Display Info. Если такого варианта нет, можно установить версию с немного большей плотностью пикселей либо файл с пометкой «nodpi», который подстраивается под любой экран.

Зачем экран хорошего смартфона должен иметь плотность пикселей больше 300 точек на дюйм

Человеческий глаз в состоянии различить отдельные пиксели при значении 300-350 ppi. Считается, если плотность пикселей выше, среднестатистический человек невооруженным глазом их уже не сможет разглядеть. Некоторые люди с идеальным зрением могут различать пиксели вплоть до уровня плотности 600 ppi. Но это редкость.

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

Хотите смартфон с качественным экраном и максимально четкой картинкой — выбирайте модели с плотностью пикселей около и немного выше 300-350 ppi.

Использование приложения LCD Density Modder Pro

Системная утилита LCD Density Modder Pro позволяет поменять разрешение вашего смартфона или планшета, работающего на операционной системе Андроид. Но следует отметить, что программа будет работать лишь на гаджетах после получения root-прав. Предварительно мы рекомендуем создать резервную копию файлов, поскольку вносимые изменения могут привести к непредвиденным результатам. При установке несовместимого значения разрешения придётся осуществить сброс настроек. В таком случае только резервное сохранение поможет сохранить важную информацию.

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

Читать еще:  Всепогодные защищенные телефоны

К особенностям программы LCD Density Modder Pro можно отнести возможность сохранять удобные настройки, чтобы применить их в нужный момент. Можно осуществлять импорт, экспорт, удаление таких параметров. Программа совместима с большинством современных мобильных устройств, поскольку для успешного использования требуется версия Андроид не ниже 2.2.

SecondScreen

Если процесс изменения разрешения экрана вышеприведенным методом вам кажется сложным или на гаджете нет рут прав, можете скачать утилиту SecondScreen в Плей Маркете. Затем выполняем следующие шаги:

p, blockquote 6,0,0,0,0 —>

    Запускаем софт, жмем на значок «+».

Отобразится основное меню программы. Там можно осуществить процесс редактирования параметров расширения экрана.

Утилита позволяет поменять разрешение экрана в 1-н клик.

Выбираем подходящее значение, к примеру, 240dpi.

Функционал приложения SecondScreen широкий. Еще пользователи могут выполнить такие настройки:

p, blockquote 7,0,0,0,0 —>

  • Отключение подсветки экрана.
  • Использование мультиэкранного режима.
  • Автоматическое подключение беспроводных аксессуаров (мышка, клавиатура и т.д.).

LCD Density Modder Pro

Утилита позволяет эффективно изменить показатель DPI. Уменьшая это значение, на экране будет увеличен шрифт, иконки, картинки и др. Данная опция будет полезной для пользователей с проблемным зрением.

p, blockquote 8,0,1,0,0 —>

p, blockquote 9,0,0,0,0 —>

  • В настройках софта указываем подходящее значение DPI.
  • Выполняем подтверждение сделанного выбора.
  • Перезапускаем гаджет.

p, blockquote 10,0,0,0,0 —>

Все совершенные изменения будут осуществлены после выполнения перезагрузки. Главный минус программы – для ее функционирования необходимо иметь рут доступ.

p, blockquote 11,0,0,0,0 —>

Android Studio

Этот софт для ПК позволяет поменять разрешение экрана при помощи командной строки. Скачать софт на компьютер можно с сайта разработчиков https://developer.android.com/studio .

p, blockquote 12,0,0,0,0 —>

p, blockquote 13,0,0,0,0 —>

  • Подключаем телефон Андроид к компьютеру через USB.
  • Запускаем командную строку.
  • В командной строке вводим «adb shell dumpsys display | grep mBaseDisplayInfo».
  • Теперь нужно нажать «Enter».

p, blockquote 14,0,0,0,0 —>

На мониторе отобразятся данные девайса. Рядом со значением «Density» будет указано расширение экрана.

p, blockquote 15,0,0,0,0 —>

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

p, blockquote 16,1,0,0,0 —>

p, blockquote 17,0,0,0,0 —>

ЧТО ТАКОЕ РАЗРЕШЕНИЕ ЭКРАНА СМАРТФОНА

Большинство пользователей может ошибочно считать, что самое главное при выборе современного сенсорного смартфона – это размер экрана. Несомненно, сам размер дисплея и его диагональ играют не последнюю роль, но при выборе важно обращать внимание на его разрешение.

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

В сегодняшнюю эпоху технологий уже нет смысла покупать смартфон с разрешением ниже 1280×720 px (пикселей), ведь экран представляет собой самую главную деталь мобильного устройства – именно на него пользователь больше всего смотрит во время использования.

ДЛЯ ЧЕГО ЭТО НУЖНО И КАКУЮ ФУНКЦИЮ ВЫПОЛНЯЕТ

Именно от разрешения зависит качество картинки на экране. Большие габариты и малое разрешение сделают ее зернистой и фрагментированной. Недорогие смартфоны плохого качества оснащаются экранами с низким разрешением, где видны пиксели из-за чего картинка получается размытой, шрифт корявым. В качестве примера можно привести сочетание характеристик: диагональ – 5 дюймов, разрешение — 800х480 px. Соответственно, чем выше показатель разрешения, тем плотнее располагаются пиксели, изображение более четкое, однородное и плавное, экран вмещает больше информации. Full-HD экраны изготавливают из таких элементов, благодаря которым пиксели совершенно невозможно различить без специального оборудования, а изображение получается супер четким.

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

ОПТИМАЛЬНЫЕ СООТНОШЕНИЯ РАЗРЕШЕНИЯ СТОРОН МОБИЛЬНОГО ТЕЛЕФОНА

Современный рынок требует от производителей повышения на своих устройствах показателей плотности пикселей и разрешения. Рациональная необходимость во всех смартфонах высоких параметров экрана – очень спорный вопрос. Во-первых, если сравнивать два экрана одинаковой диагонали с небольшой разницей значений разрешений, то эффект от использования, с учетом комфортности для глаз, будет практически идентичный. Хотя не исключается тот факт, что в момент просмотра любых фотографий, видео, фильмов, разница качества может ощущаться. В идеальных условиях пользователь со 100% зрением может различить плотность пикселей до 350 DPI, в реальности 250 DPI более чем достаточно.

Теперь подробней о существующих, на сегодняшний день, разрешениях экрана смартфона:


  • 240х320 px. Минимально существующие разрешение, которое поддерживает операционка Android. Устанавливается в очень дешевые телефоны и пользоваться ОС с таким дисплеем сплошная мука, поэтому специалисты не советуют их для ознакомления с Андроидом, иначе разочарование от низкого качества может отвернуть пользователя и от операционной системы, и от сенсорных устройств в принципе.
  • 320х480 px.Такой вариант является мало-мальски приемлемым для смартфона. Данное разрешение экрана встречается у крайне бюджетных моделей телефонов с диагональную не более 3,5 дюймов. Не пользуются популярностью из-за излишней зернистости изображения. Такие смартфоны на рынке встречаются уже крайне редко.
  • 480х800 px и 540х960 рх. Разрешение по сравнению с вышеупомянутыми немного более комфортно. Используется в смартфонах, также, бюджетного класса. Оптимальная диагональ экрана не должна превышать 3,5-4 дюйма, так как на больших дисплеях может «просочиться» предательское фрагментированное изображение.
  • 720х1280 px. Самое популярное сегодня разрешение экрана, используемое производителями при выпуске смартфонов средней ценовой категории. В основном предназначено для телефонов с диагональю 4,5-5,5 дюймов. С данного размера стартуют так называемые HD-смартфоны. Разрешение обеспечивает хорошую детализацию изображения.
  • 1080х1920 px. Это разрешение высокого уровня Full-HD. Обычно используется для девайсов с диагональю от 5 дюймов. Даже при условии использования экрана с диагональю 7 дюймов картинка будет оставаться четкой, не появится зернистости. Существует мнение, что использовать такое разрешение целесообразней при диагонали дисплея выше 6 дюймов, при меньшем значении человеческий глаз найти отличия между HD от FHD, в принципе, не в состоянии. Зато большое разрешение сильно отразится на стоимости матрицы экрана и всего устройства в целом, и заставит девайс потреблять больше электроэнергии.
  • 1440х2560 px. 2K или QuadHD – довольно модное сегодня разрешение и не распространённое. Разбирающиеся граждане в замешательстве от явного излишества, помещенного в компактный девайс, в котором нет необходимости даже планшету с диагональю 7 дюймов. Увеличение плотности размещения пикселей на один дюйм до невероятных высот не так уж и ощутимы человеческим глазом, зато это хорошо почувствует батарея и быстродействие смартфона.
Читать еще:  TSF Launcher 3D Shell 3.8.6 для Андроид

КОМПРОМИССЫ И ВЫВОДЫ

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

В условиях сегодняшних потребностей пользователя наиболее актуальным при выборе нового смартфона средней ценовой категории будет устройство с диагональю в пределах 4.5″- 6.0″ дюймов с разрешением 720х1280 px или с разрешением 1080х1920 px.

Шаг 2: Проверьте текущее разрешение и DPI

В самом начале вы должны проверить, какое исходное разрешение у вас есть на телефоне и какой DPI установлен. Вы можете сделать это, подключив свой телефон к компьютеру с помощью USB-кабеля и введя следующие две команды в окне командной строки:

Размер оболочки adb wm

adb-оболочка в m-плотности

Команда «wm size» отобразит разрешение (например, 1080×1920), а «плотность wm» отобразит заданное значение DPI (например, 440).

Сохраните эти настройки, чтобы при необходимости вернуться к исходным значениям.

Как узнать DPI экрана телефона?

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

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

Вспоминая те грабли, на которые наступали знакомые мне дизайнеры, первое, что вызывает проблемы с нарисованными ими макетами — это отсутствие точных представлений о том, сколько же пикселов влезет на экран с номинальным разрешением выше, чем у настольного 20’ монитора. Ну что же, ничего страшного, на это и был рассчитан маркетинг больших цифр. Эта статья поможет разобраться в сложившейся ситуации.

Речь идет об устройствах на Android и iOS, WP пока экзотика, и без опыта личного обращения я не возьмусь давать рекомендации.

Отображение неадаптированной страницы в мобильном браузере

Если в HTML документе отсутствуют метатеги, говорящие мобильному браузеру что-либо о том, в какой ширине отображать документ, то браузеры будут вести себя так, как будто ширина документа 980 пикселов. Это справедливо как для телефонов с шириной экрана в 320 пикселов, так и для 10-дюймовых таблеток, использующих Android и iOS и браузер на Webkit. Такой подход подразумевает, что сайты с минимальной шириной в 960 пикселов получат небольшие поля для удобства восприятия контента.

Если же минимальная ширина документа больше, то поведение браузеров начинает различаться. Safari в iPhone/iPad в большинстве случаев просто сожмет контент. В Android проявят себя DIP — density-independent pixels, подробнее о которых позже. Если ширина документа больше 980 и больше, чем ширина устройства в DIP, появится прокрутка право. Так, сайт с шириной содержимого в 1040 пикселов будет отображаться без горизонтальной прокрутки на iPhone и IPad (1024 пикселов), но с прокруткой на телефонах вроде galaxy S3 (физическое разрешение 1280х720) или планшете Nexus 7 (физическое разрешение 1280х800).

Какие стоит сделать выводы? Несмотря на обилие широкоформатных дисплеев в настольных ПК и ноутбуках, старая добрая сетка на 960 пикселов не утратила свою актуальность. Мобильные браузеры имеют так же свойство подгонять текстовые блоки в формат, удобно читаемый на устройстве, например, поджимать текст в узкий столбец на телефоне и увеличивать его шрифт. Это не получится, если содержащий блок текст жестко ограничен по высоте. На самом деле, вообще никогда не стоит делать сайт, где что-либо ограничено по высоте, особенно если планируются посетители с мобильных устройств. Еще один враг мобильных устройств, особенно — телефонов — это элементы с position: fixed. Например, модная ныне кнопка назад, настойчиво бегающая за пользователем по странице. Еще хуже — большие плашки, вроде фиксированной шапки. Такие элементы не только занимают полезную площадь на малом экране, но и остаются на прежнем месте при увеличении. Проблема характерна также для модальных окон. Если они отображаются посередине экрана, то с мобильника увеличение их содержимого требует изрядной ловкости. Использование попапов вроде “будь на связи с нами в социальных сетях!”, ведущих себя подобным образом — вообще лютое неуважение к пользователям мобильных устройств, потому что зачастую покинуть сайт проще, чем закрыть этот попап.

Рассмотрим на примере парочки сайтов.

Не смотря на то, что лента.ру имеет очень пристойную мобильную версию, автоматический переход на нее не производится. В настольной fixed-меню залезает на текст при автоматическом масштабировании. Перед пользователем встает выбор либо масштабировать руками, либо не полениться прописать m. в url.

РБК. Вообще у них тоже есть мобильная версия, но переход на нее осуществляется только с главной страницы. По прямой ссылке (из Google News, в частности) можно наблюдать это нечитабельное полотно. Задержится ли посетитель на таком сайте? Едва ли.

Суперканонический поехавший попап на РБК-стайл. Выдающийся пример того, как делать не надо.

Интан, который верстал угадайте кто. Я, разумеется, прекрасно понимал, почему нельзя так поступать с меню, но как-то не было настроения спорить. Задать вопрос вообще не в тему.

Еще одна штука, которая обычно не оправдывает затраты времени в настольном виде и вызывает проблемы в мобильном — это кастомные элементы форм. То, что средствами CSS они почти не настраиваются, получилось не просто потому, что консорциуму всемирной паутины было лень.

Например, вы нарисовали красивый выпадающий список. Допустим, в настольном браузере он похож на все остальное, от открывается по клику мыши и прокручивается ее колесиком. Но в мобильном работа с таким элементов у вас вызовет большие проблемы. Если бы select был стандартным, пользователю показали бы системное окно с барабаном/выпадающим списком, в зависимости от ОС.

А возможность прикрепить файл в iOS отсутствует как таковая. И если стандартный вид кнопки намекнет пользователю, что она отключена, то какая-нибудь яркая красивая кнопка будет вызывать ощущение того, что на вашем сайте что-то не работает.

Читать еще:  Towelroot APK Download For Android【Working on All Phones】

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

Еще одной неприятной особенностью мобильных браузеров является то, что в настоящее время они не кешируют подключаемые шрифты. Тот же PT Sans во всех начертаниях, подключенный с Google Web Fonts, грузится ощутимо долго. При этом едва ли он так уж ощутимо проигрывает встроенным Helvetica / Roboto. Хорошо подумайте, стоит ли лишнее время загрузки вашего кастомного шрифта.

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

В iPhone и iPad используется понятие точек — apple points. Разрешение iPhone вплоть до 5 модели — 320 на 480 точек. Что такое Retina Display? Retina Display использует двойную плотность пикселов, то есть на одну точкку приходится 4 физических пиксела. Так, у iPhone 4 при физическом разрешении экрана 640 на 960 пикселовв все же же 320 на 480 точек. Но при этом графика более детализирована за счет использования вдвое больших изображений в приложениях. Для iPhone 5 значение в точках увеличилось с 480 до 568. У iPad всех версий, включая Mini, оно неизменно — 1024х768.

По умолчанию в масштабе 1 к 1 стандартная графика в web (например, background-image) будет отображена в как-бы увеличенном вдвое виде, на 4 пиксела физического экрана будет растянут один пиксел растрового изображения. Как использовать графику высокого разрешения в такой ситуации мы рассмотрим в следующем разделе. Главное, что нужно помнить о разрешениях iOS устройств — не надо думать, что страницы в ретине и не-ретине имеют разную ширину. Нет, разница только в плотности пикселов, пропорции абсолютно те же.

В Android ситуация гораздо сложнее, точнее, многообразнее. В Android используется понятие different screen densities (DPI). Суть его в том, что при разных физических размерах дисплея и разрешающей способности, модель поведения по точкам отличается в зависимости от назначения устройства. аналогом Points служит вышеупомянутый DIP.

Плотность экрана — 1. В эту категорию входит множество устройств, такие как телефоны 320х480 (HTC Hero, LG Optimus One), 7-дюймовые таблетки 1024х600 (Samsung Galaxy Tab, Kindle Fire), 10-дюймовые таблетки (Asus Transformer, Acer A500, Galaxy Tab 10’1).

Плотность экрана 1,33 используется в 7-ми дюймовых планшетах вроде Nexus 7. Физическое разрешение — 1280х800, в DIP — 960х600.

Плотность экрана 1,5 — мобильные телефоны высокой ценовой категории 2011 года и средней 2012 года, 10-ти дюймовые планшеты с FullHD. Например, Nexus One 480×800 пикселов, 360х533* DIP, HTC One S — 540х960 пикселов, 360х640 DIP, и Asus Transformer Pad Infinity 1920×1200 пикселов, 1280х800 DIP.

*на Android Developers встречается 534, но измерение ширины браузера через JS показывает именно 533, соответственно и в медиазапросах стоит ориентироваться на эту цифру.

Плотность экрана 2 — телефоны высокой ценовой категории 2012 года и буквально пара планшетов. Например, HTC One X, Samsung Galaxy S3 — разрешение экрана 1280х720, размеры в DIP 360х640. Планшет Google Nexus 10 — разрешение 2560х1600 пикселов, 1280х800 DIP.

Плотность экрана 3 — флагманы 2013 года с FullHD дисплеем. При разрешении в 1920х1080 пикселов у них все те же 360х640 DIP.

При всем этом есть еще выбивающийся из колеи Google Nexus 4 c экраном в 1280х768 пикселов с плотностью 2 (384х640). В моделях с экранными клавишами 42DIP занимает панель для них, поэтому в моделях такого рода (Galaxy Nexus, Nexus 4, Sony Xperia Z) в портретном режиме портретное разрешение будет несколько меньше, и составит 598 точек.

Таким образом, у нас есть три разрешения для портрета — 320, 460 и редкое 384, и четыре c половиной ландшафтных — 480, 533, 568, 640 (598 с софт-клавишами).

У планшетов это портретные 600 и 800, и ландшафтные 960, 1024 и 1280.

Таблица ниже приводит большинство типовых разрешений популярных продуктов:

Как начать работу над макетом мобильного приложения?

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

Для работы над макетом приложения для iPhone создайте холст 640×1136 (960) и используйте размеры, кратные двум. Вся графика, все шрифты должны быть таковыми.

Определенную часть экрана в вашем будущем приложении могут занимать status bar с индикаторами сигнала, батареи и т.д. Это 20 точек в iOS и 25 DIP в Android. В Android телефонах с soft-клавишами и планшетах 48 DIP внизу экрана занимает плашка под них (Navigation Bar). При этом в неканоничных устройствах вроде планшетов Samsung из-за использования фирменной оболочки Navigation Bar и Status Bar совмещены.

Для приложения под телефоны на Android актуально брать хост не меньше 720х1280. Лучше сразу 1080х1960, в расчете на современные флагманы.

Для холста в 720х1280 размеры так же должны быть кратны двум, для 1080х1960 кратно трем. Использовать в качестве холста 480х800 или 640х960 — очень плохая идея.

В процессе работы над макетом нужно периодически уменьшать размеры окна графического редактора до примерных размеров реального устройства, а так же сохранять JPG и просматривать его на настоящем устройстве. Можно ли попасть пальцем в кнопку? Не слишком ли мелкий текст?

Использовав макет неподходящих размеров, вина за кривой вид приложения или его замыленную графику окажется полностью на вас.

В общем, будьте внимательны к деталям и помните — пикселы и точки/дипы — уже не одно и то же.

Оптимизация Web-графики для экранов высокой плотности

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

При этом поддержка SVG пока весьма ограничена, и для обратной совместимости со старыми браузерами все равно придется использовать растр. Другой головной болью будет использование спрайтов — значения background-position нужно будет указывать в процентах, что потребует больших математических вычислений. Наименее сложным путем является использование нескольких вариантов одних и тех же изображений, через медиа-запрос, например -webkit-min-device-pixel-ratio: 2.

Как можно заметить, методика сама по себе очень простая и требует всего лишь наличие нескольких версий одной и той же картинки, если она использована в качестве background-image. Обычные же изображения при необходимости можно загружать вдвое большего, чем они должны быть размера и прописывать нужный на странице размер через атрибут style.

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

  • 2.77
  • 1
  • 2
  • 3
  • 4
  • 5

Голосов: 986 | Просмотров: 25426

Ссылка на основную публикацию
Статьи c упоминанием слов:
Adblock
detector