Что такое экран retina

Что такое экран retina

Узнайте о дисплее Retina вашего компьютера Mac.

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

Компьютеры Mac, оснащенные дисплеем Retina

  • Модели MacBook Pro (16 дюймов), представленные в 2019 г. Штатное разрешение: 3072 x 1920, 226 пикселей на дюйм. Поддержка миллионов цветов.
  • Модели MacBook Pro (15 дюймов), выпущенные в 2012 г. или позднее, за исключением MacBook Pro (15 дюймов, середина 2012 г.). Штатное разрешение: 2880 x 1800, 220 пикселей на дюйм. Поддержка миллионов цветов.
  • Модели MacBook Pro (13 дюймов), выпущенные в конце 2012 г. или позднее. Штатное разрешение: 2560 x 1600, 227 пикселей на дюйм. Поддержка миллионов цветов.

Модели MacBook Air, выпущенные в 2018 г. или позднее. Штатное разрешение: 2560 x 1600, 227 пикселей на дюйм. Поддержка миллионов цветов.

Модели MacBook, выпущенные в 2015 г. или позднее. Штатное разрешение: 2304 x 1440, 226 пикселей на дюйм. Поддержка миллионов цветов.

  • Модели iMac (27 дюймов), выпущенные в 2014 г. или позднее. Штатное разрешение: 5120 x 2880. Модели, выпущенные в 2014 и 2015 гг., поддерживают миллионы цветов, а выпущенные в 2017 г. или позднее — один миллиард цветов.
  • Модели iMac (21,5 дюйма), выпущенные в 2015 г. или позднее, за исключением iMac (21,5 дюйма, 2017 г.) и iMac (21,5 дюйма, конец 2015 г.). Штатное разрешение: 4096 x 2304. Модель с дисплеем Retina, выпущенная в 2015 г., поддерживает миллионы цветов, а модели, выпущенные в 2017 г. или позднее — один миллиард цветов.

Все модели iMac Pro. Штатное разрешение: 5120 x 2880. Поддержка одного миллиарда цветов.

Изменение разрешения дисплея

Компьютер Mac автоматически выбирает оптимальное для дисплея разрешение по умолчанию. Чтобы изменить разрешение:

  1. Откройте меню Apple () > «Системные настройки».
  2. Щелкните «Мониторы».
  3. Выберите «Масштабированное», затем выберите любое из четырех или пяти масштабированных разрешений, в зависимости от модели компьютера Mac. В масштабированных разрешениях текст и объекты могут выглядеть крупнее и заметнее либо мельче, оставляя больше места для окон и программ.

Если также используется внешний дисплей

Если внешний дисплей используется для расширения рабочего стола, можно выбрать предпочтительное разрешение для каждого из дисплеев. Чтобы отобразить дополнительные разрешения для внешнего дисплея, нажмите и удерживайте клавишу Option при выборе параметра «Масштабированное».

Если внешний дисплей используется для видеоповтора встроенного дисплея, компьютер Mac оптимизирует изображение для дисплея, выбранного во всплывающем меню «Оптимизация для». Позвольте компьютеру Mac выбрать наилучшее разрешение для дисплея или выберите «Масштабированное» и задайте другое разрешение.


При видеоповторе дисплеев можно оптимизировать изображение для внешнего дисплея, а не для встроенного

Использование программ с дисплеем Retina

Если программа выглядит на дисплее Retina или внешнем дисплее с высоким разрешением не так, как вы ожидали, попробуйте открыть программу в режиме низкого разрешения:

  1. Выйдите из программы.
  2. Откройте папку «Программы».
  3. Выделите программу одним щелчком, затем выберите пункт «Свойства» в меню «Файл».
  4. В открывшемся окне «Свойства» установите флажок «Открыть в низком разрешении».
  5. Закройте окно «Свойства» и снова откройте программу.

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

Использование программы Boot Camp и Windows с дисплеем Retina

  • Программа Boot Camp поддерживает разрешения до 3840 x 2160.
  • Когда компьютер Mac использует ПО поддержки Windows от компании Apple, ОС Windows запускается с максимальным поддерживаемым разрешением, которое составляет 144 точки (пикселя) на дюйм (увеличение 150 %). В результате объекты выглядят мелкими на большом пустом пространстве экрана. Для регулировки этого параметра в Windows можно использовать элемент панели управления Windows «Экран».

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

Н а нашем сайте мы уже не раз говорили о продукции от Apple: планшетах , моноблоках , мобильной операционной системе iOS 11 . Сегодня мы дальше продолжим знакомить вас с особенностями продукции от этой купертинской компании. В нашей сегодняшней статье мы расскажем вам об одном моменте, который заставляет пользователей восторженно вздыхать от взгляда на экран смартфона / ноутбука / планшета / моноблока от Apple. Здесь речь идет об удивительном экране Retina.

Читайте также:  Как сделать сравнение в excel двух таблиц

Итак, что такое Retina? В чем заключается преимущество этой технологии перед конкурентами? И вообще, как работает эта Retina? Давайте разбираться.

Что такое Retina дисплей

Когда Стив Джобс на презентации нового iPhone 4 впервые показал миру дисплей Retina – весь мир просто ахнул от удивления и взорвался волной неподдельного восторга. После iPhone 4 этот дисплей появился в новых моделях iPad, MacBook и iMac. Но что такое Retina дисплей и почему люди так им восторгаются?

Самое главное, что вам стоит знать, так это то, что Retina является запатентованным брендом компании Apple. Кроме того, в этих дисплеях нет никаких технических откровений. По сути, компания Apple может давать любому дисплею приставку Retina, но с одним условием. Сам Джобс на памятной презентации iPhone 4 говорил, что новый дисплей смартфона настолько четкий, что никто в мире не сможет разглядеть отдельные пиксели с расстояния 25 дюймов. В самом же iPhone 4 плотность пикселей составляет 326 точек на дюйм.

С момента презентации iPhone 4 много воды утекло, и компания Стива Джобса представила целый ряд устройств, в которых установлен экран Retina. Но если вы посмотрите, например, на плотность пикселей в iPad и сравните это значение с плотность в iPhone, тогда у вас может возникнуть некоторое сомнение. Все дело в том, что в планшетах Apple плотность пикселей на экране всего-то 256 точек на дюйм. Так почему же такие экраны также имеет приставку Retina? Неужели компания Apple нас нагло обманывает?

Нет, Apple нас не обманывает. Все дело в том, что для получения приставки Retina дисплею достаточно того, чтобы отдельный пиксель был незаметен людскому глазу. То есть, у нас есть два прямых критерия, которые влияют на то, видим ли мы отдельный пиксель, или нет: плотность и расстояние от экрана до глаз. Поэтому, чем дальше от глаз мы держим экран, тем меньшая плотность пикселей нужна для «исчезновения» пикселей. Иными слова, чем большая диагональ экрана, тем дальше вы его держите от глаз, и тем ниже значения плотности пикселей нужно для получения титула Retina. Вот так, ловкость рук и никакого мошенничества.

В чем разница между обычным дисплеем и дисплеем Retina?

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

Но Apple была бы не Apple, если не исправила бы эту проблему. Итак, проблемы с миниатюризацией инженеры решили с помощью создания специальной системы HiDPI. Работа системы максимально простая: она занимается масштабированием элементов интерфейса до приемлемого для наших глаз размера. Главная задача Retina дисплеев – это сделать все на экране более четким. Особенно дисплеи Retina хорошо отображают текст. Благодаря большому количеству пикселей буквы выглядят плавными и складывается впечатление, что читаешь реальный качественный журнал, а не какую-то его версию в pdf.

Что такое Retina HD и Retina 4K / 5K?

Если дисплеи Retina такие классные, тогда куда уже дальше их улучшать? Но это же Apple, а значит инновациям нет конца 🙂 Все знают, что Apple не только умеет создавать самые лучшие в мире устройства, но и умеет их удачно продавать. И когда в мире все начали говорить сначала о HD, а потом о Full HD и 4К, парни из Купертино просто не могли оставаться в стороне от всего этого. И как результат, в 2014 году выходит новый iPhone 6 с HD разрешением экрана. В iPhone 6 Plus разрешение экрана уже было Full HD. А как именно Apple назвали эти дисплеи в iPhone? Правильно, Retina HD и Retina Full HD.

Когда мир начал сходить с ума по поводу разрешения 4К (экраны с 4 000 пикселей по горизонтали), компания Стива Джобса также выпустила свое устройство с экраном 4К — Retina 4K. Таким устройством стал iMac с диагональю дисплея 21 дюйм и плотностью пикселей 218 точек на дюйм. Но разрешение 4К есть у всех, а Apple ведь должна быть лучше всех. Поэтому, в 2014 году на рынок вышел iMac с диагональю 27 дюймов и впечатляющем разрешением по горизонтали 5120 точек. Как вы уже догадались, в компании этот дисплей назвали Retina 5K. Как видите, для Retina нет преград с точки зрения разрешения. Главное высокая плотность пикселей.

Читайте также:  Облачное видеонаблюдение через интернет

Используют ли другие производители термин Retina?

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

Так, например, одной из первых моделей смартфонов на рынке, в которой плотность пикселей дисплея была значительно больше, чем в iPhone, был Sony Xperia Z5 Premium. Только представьте себе, при разрешении 4К и диагонали дисплея 5,5 дюймов, плотность пикселей составляла 806 точек на дюйм. Также компания Samsung не могла стоять осторонь этих гонок за плотностью пикселей. Первый ее смартфон с действительно высокой плотностью пикселей на дюйм – это Galaxy S6. При разрешении 1440 x 2560 (Quad HD или QHD) и диагонали дисплея 5,1 дюйм плотность пикселей составляет 5,1 дюйм.

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

После недавнего выпуска Retina MacBook Pro и The new IPad, экраны с увеличенной плотностью пикселей начали активно входить в нашу жизнь. Что это значит для веб-разработчиков?

Для начала разберемся в терминологии.

Физические пиксели

Физические пиксели (device pixel или physical pixel) — привычные нам пиксели: самые маленькие элементы любого дисплея, каждый из которых имеет свой цвет и яркость.

Плотность экрана (Screen density) — это количество физических пикселей дисплея. Обычно измеряется в пикселях-на-дюйм (PPI: pixels per inch). Apple, разработав Retina-экраны с двойной плотностью пикселей, утверждает, что человеческий глаз не способен различить бо′льшую плотность.

CSS-пиксели

CSS-пиксели (CSS pixels) — абстрактная величина, используемая браузерами для точного отображения контента на страницах, вне зависимости от экрана (DIPs: device-independent pixels). Пример:

Такой блок на обычных экранах будет занимать область 200×300 пикселей, а на Retina-экранах тот же блок получит 400×600 пикселей.Таким образом, на Retina-экранах плотность пикселей в 4 раза больше, чем на обычных:

Соотношение между физическими и CSS-пикселями можно устанавливать так:

В Javascript добиться этого можно, используя

Растровые пиксели


Растровые пиксели (bitmap pixels) — самые маленькие части, составляющие растровое изображение (PNG, JPF, GIF и т.д.) Каждый пиксель содержит информацию, о цвете и расположении в системе координат изображения. В некоторых форматах пиксель может содержать дополнительную информацию, например, прозрачность.

Кроме растрового разрешения, изображения в интернете имеют абстрактные размеры в CSS-пикселях. Браузер сжимает или растягивает изображении в соответствии с его CSS-шириной и -длиной. При отображении на обычном экране один растровый пиксель соответствует одному CSS-пикселю. На Retina-экранах каждый растровый пиксель умножается в 4 раза:

Оптимизация

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

HTML и CSS-масштабирование

Самый простой способ подготовить графику к Retina-дисплею — это просто разделить пополам физические размеры изображения. Например, чтобы показать фотографию 200×300 пикселей на экране с увеличенной плотностью пикселов, необходимо загрузить фото размером 400×600 пикселей и уменьшить его, используя CSS-аттрибуты или HTML-параметры. Таким будет отображение на обычном экране:

А таким на Retina:

Есть несколько способов реализации HTML и CSS-масштабирования:

Самый простой способ — просто задать параметры width и height тегу img:

Где использовать: на одностраничных сайтах с несколькими изображениями.

Javascript

Такого же результата можно добиться, используя Javascript для того, чтобы делить пополам размеры изображений для Retina-экранов. С использованием библиотеки jQuery это выглядит так:

Читайте также:  Робот пылесос и ковер

Где использовать: на сайтах с несколькими изображениями в контенте.

CSS (SCSS)

Также можно использовать изображение в качестве фона с необходимыми размерами (background-size) определенного div’а. Параметр background-size не поддерживается в IE 7 и 8.

Можно использовать псевдоэлементы :before или :after

Техника работает и при использовании спрайтов:

Где использовать: на сайтах с ограниченным количеством фоновых изображений (например одним в качестве спрайта).

HTML и CSS-масштабирование: плюсы

  • Простота реализации
  • Кроссбраузерность

HTML и CSS-масштабирование: минусы

  • Устройства с обычными экранами будут скачивать лишние мегабайты
  • На обычных экранах четкость изображений может пострадать из-за алгоритмов сжатия
  • Параметр background-size не поддерживается в IE 7 и 8.

Определение плотности пикселей экрана


Возможно это самый популярный способ оптимизации графики для Retina-дисплеев. Используется CSS или Javascript.

В этом способе используется device-pixel-ratio, чтобы установить нужное соотношение между физическими и CSS-пикселями:

Где использовать: на сайтах или в приложениях, в которых применяется background-image для элементов дизайна. Не подходит для изображений внутри контента.

Плюсы

  • Устройства не скачивают лишние изображения
  • Кроссбраузерность
  • Контроль плотности пикселей на сайте

Минусы

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

Javascript

Того же результата можно добиться, используя window.devicePixelRatio:

Существует специальный Javascript плагин Retina.js, который умеет делать все вышеописанное, но с дополнительными возможностями, такими как пропуск внешних изображений и пропуск внутренних, но не имеющих retina-копий.

Где использовать: на любых сайтах с изображениями в контенте.

Плюсы

  • Простота внедрения
  • Устройства не скачивают лишние изображения
  • Контроль плотности пикселей на сайте

Минусы

  • Retina-устройства скачивают оба варианта каждого изображения
  • Подмена изображений заметна на retina-устройствах
  • Не работает в некоторых популярных браузерах (IE и Firefox)

Масштабируемая векторная графика


Вне зависимости от используемого метода растровые изображения по своей природе остаются ограниченными в масштабировании. Тут нам может помощь векторная графика. SVG (Scalable Vector Graphics) формат на основе XML поддерживается большинством браузеров. Самый простой способ использования SVG-изображений — в теге img или CSS-параметрами background-image и content:url().

В этом примере простое SVG-изображение может быть как угодно масштабировано:

То же самое получится с применением CSS:

Для поддержки IE 7 или 8 и Android 2.x потребуется использование заменяющих PNG-изображений. Это можно легко сделать с помощью Modernizr:

Для лучшей кроссбраузерности, чтобы избежать проблем растеризации в Firefox и Opera, следует сделать каждое SVG- изображение соответствующим его родительскому HTML-элементу.

В HTML можно реализовать аналогичное с помощью нужного data в теге a:

С использованием jQuery и Modernizr:

Где использовать: на любых сайтах, подходит для иконок, логотипов и простых векторных иллюстраций.

Плюсы

  • Единый набор изображений для всех устройств
  • Простота реализации
  • Бесконечное масштабирование

Минусы

  • Нет точного сглаживания «до пикселя»
  • Не подходит для сложной графики из-за больших размеров файла
  • Нет встроенной поддержки в IE 7, 8 и в ранних версиях Android

Иконочные шрифты


Популярный благодаря Twitter Botstrap способ, заключается в замене букв в шрифте на нужные символы с последующим их отображением на странице с помощью CSS. Существует множество иконочных шрифтов с символами на любой вкус, но можно также создать свой с помощью Fontello, Font Builder или даже Inkscape.

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

А в стилях указывается нужный шрифт:

Таже можно использовать псевдоэлемент :before и параметр content с уникальным классом к каждой иконке:

Где использовать: на сайтах с большим количеством иконок и для быстрого прототипирования.

Плюсы

  • Бесконечное масштабирование
  • Кроссбраузерность
  • Более универсальное решение, чем набор графических элементов

Минусы

  • Нет точного сглаживания «до пикселя»
  • Сложность реализации: отдельный символ шрифта к каждой иконке
  • Способ основан на семантически некорректной разметке

Favicon

Favicon’ки все чаще используется вне браузера в качестве графического представления сайта или приложения. Чтобы оптимизировать favicon для Retina-устройств, необходимо подготовить .ico в двух размерах: 16×16 и 32×32 пикселей.

Взгляд в будущее

Существует специальный -Webkit-image-set от Apple, представленный весной, который позволяет использовать несколько вариантов одного изображения в CSS:

Но этот способ не распространяется на изображения внутри тега img.

Еще один инструмент — Picturefill, автор Scott Jehl. Это HTML и Javascript решение:

Несмотря на такую разметку, это вполне нормальное кроссбраузерное решение.

Еще одно амбициозное предложение — использование элемента picture, который позволяет использовать несколько адаптивных изображений, заменяющих друг друга в зависимости от размера и плотности пикселей экрана

Ссылка на основную публикацию
Что такое django python
Django Тип каркас веб-приложений Автор РазработчикDjango Software FoundationНаписана наPython[2]Интерфейсвеб-интерфейсОперационная системакроссплатформенностьПервый выпуск2005[1]Последняя версия 3.0.4 ( 4 марта2020 ) [3] Лицензиямодифицированная лицензия...
Чем чистить датчик абсолютного давления
ВСЁ СВОИМИ РУКАМИ 12.06.2018 . . После покупки Шевроле Лачетти оказалось, что эта первая моя машина, на которой был установлен...
Чем хорош увлажнитель воздуха отзывы
у нас на работе стоял, попеременно двигали каждый к себе поближе, ибо да, с ним как-то лучше, мне лично глазам...
Что такое hangouts и для чего
Хэкгаутс что это за программа на телефоне Добрый день, друзья. Для смартфонов на разных платформах существуют тысячи программ. Сейчас мы...
Adblock detector