Размеры экранов iphone

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

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

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

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

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

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

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

Разрешение экрана у айфона первого поколения, 3, 3GS

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

Самые лучшие результаты были у 3GS, который получил самые насыщенные цвета. Также появляется жироотталкивающее покрытие для меньшего загрязнения.

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

Разрешение экрана у iPhone 4, 4S

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

Эра экранов с 3,5 дюйма заканчивается, но все помнят насколько эти смартфоны сделали Apple популярным. Абсолютно все в этих телефонах было и есть прекрасным.

Теперь нужно догонять своих конкурентов и в ответ Apple делает смартфоны с 4 дюймами. Уж слишком много появляется приколов про удлинения iPhone прошлого поколения.

Разрешение экрана у айфона 5, 5S, 5C, SE

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

Начиная с 5S начинают использовать IPS Retina+. Но в целом разницу весьма трудно заметить. Все сделаны качественно и примерно на одном уровне.

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

Разрешение экрана у iPhone 6, 6S, 6 PLUS, 6S PLUS

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

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

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

Разрешение экрана у айфона 7, 7 PLUS

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

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

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

Другие интересные статьи

Поделиться:
Нет комментариев

Добавить комментарий

Ваш e-mail не будет опубликован. Все поля обязательны для заполнения.

×
Рекомендуем посмотреть