Разработчики разных компаний стараются уделять больше внимания дисплею, пытаясь привлечь новых пользователей к своей продукции. Так чем же удивил в этот раз Apple, и что такое дисплей Retina? Его преимущества перед другими и недостатки. Именно об этом и расскажет данная статья.
Дисплей – это неотъемлемая часть каждого устройства. Будь то планшет, компьютер или телефон. Ведь именно через него осуществляется связь человека с «железом».
При использовании этого дисплея человек совсем не заметит пикселей. Картинка очень чёткая и яркая, чем может похвастаться далеко не каждое устройство.
Раньше такой чёткостью дисплея можно было насладиться только на профессиональных компьютерах, но теперь доступно и на устройствах от Apple. Чаще всего Retina используется на планшетах iPad , разрешение составляет 2048х1536 точек. Это даже больше, чем у некоторых компьютерных мониторов.
Фото: Наглядное сравнение разрешения iPhone 3Gs (обычный дисплей) и iPhone 4s (ретина-дисплей)Retina дисплей является запатентованным средством, а значит использовать его именно в таком виде не имеет права ни один бренд. Однако была попытка увеличить пиксели экрана в компании Sony, но она не увенчалась успехом. Так как именно в Apple размер экрана (дюймы) соответствует количеству пикселей. Ведь стоит помнить о том, что при увеличении разрешения требуется и увеличивать техническую составляющую устройство.
Стив Джобс (основатель Apple) как-то сказал, что 300 точек на дюйм – это золотая середина для телефонов.
Retina дисплей содержит в себе ряд преимуществ, которые отличают его от дисплеев других компаний:
Но все дисплеи имеют свои недостатки. И Retina не стал исключением. При использовании на максимально возможных настройках батарея быстро нагревается и разряжается.
Retina Display – фирменная технология компания Apple, на базе которой создаются дисплеи для всех новых мобильных устройств. Компания продвигает эту технологию как современное чудо, равного которому не было, и обещает в этих экранах, кроме отличной передачи цветового баланса, еще и огромную плотность пикселей. В принципе, сейчас ведется интеллектуальная война между технологиями Retina и OLED от Samsung. Что более интересно, так это то, что Retina – хорошо всем знакомая технология TFT + IPS. Плюс засилие брэнда, разумеется.
TFT, или LCD – экраны, построенные на базе свойств жидких кристаллов. Эти кристаллы являются жидкостью, которая при определенном воздействии могжет превращаться в кристалл, а потом опять становиться жидкой. Эту жидкость синтезируют на предприятиях, строя на ней различные LCD экраны. Принцип работы монитора довольно прост, если описывать его на пальцах. Имеется два поляризационных фильтра, через которые проходит свет. Один из них имеет вертикальную решетку вырезов, второй – горизонтальную. Между фильтрами находится «аквариум» с жидкими кристаллами. Разумеется, он очень тонкий, закрытый, а внутри, кроме кристаллов, находятся дорожки для прохождения электрического тока. Сами кристаллы не воспроизводят цвет, но отражают его. Когда на сетку подается ток, кристалл поворачивается и меняет направления света. Для монохромных дисплеев этого уже хватает. Когда поляризирующие пластины имеют одно направление, то на выходе фильтра свет задерживается и получается черная точка, иначе – белая. Цвет создается с помощью цветных светофильтров, на каждый из которых попадает луч от кристалла.
Для LCD мониторов придуманы различные «улучшители» передачи, к примеру, IPS и TN. С помощью первой технологии организуется большой угол обзора картинки на экране, а также более естественные цвета. Вторая технология выглядит поуже и похуже, зато работает намного быстрее. Объединить их невозможно. Понятие TFT, вообще говоря, относится к транзисторной технологии на тонкой пленке, где каждый из них усиливает свойства отдельного пикселя по скорости и контрастности. В TN жидкие кристаллы расположены перпендикулярно экрану, в IPS – параллельно. Для пользователя же важно то, что глаз не видит отдельных пикселей при плотности свыше 300 dpi, а технология Retina этого уже добилась.
Осталось только немного рассказать о том, чем, в принципе, отличаются от LCD-базовых особенностей OLED технологии. В них используется рабочее тело, которое само, без инициирующего света, может создавать свечение, вследствие чего на такой технологии можно получать гораздо более тонкие мониторы. Кроме того, OLED мониторы намного экономнее используют энергию и могут дольше работать без подзарядки. Еще пока неизвестно, какая технология победит в дальнейшем, но уже сейчас размеры устройств от Samsung растут и увеличивают свою плотность на дюйм, из-за чего Retina кажется технологией позапрошлого дня. Но у Apple еще найдутся козыри в рукаве – как всегда.
После недавнего выпуска Retina MacBook Pro и The new IPad, экраны с увеличенной плотностью пикселей начали активно входить в нашу жизнь. Что это значит для веб-разработчиков?
Для начала разберемся в терминологии.
Физические пиксели (device pixel или physical pixel) - привычные нам пиксели: самые маленькие элементы любого дисплея, каждый из которых имеет свой цвет и яркость.
Плотность экрана (Screen density) - это количество физических пикселей дисплея. Обычно измеряется в пикселях-на-дюйм (PPI: pixels per inch). Apple, разработав Retina-экраны с двойной плотностью пикселей, утверждает, что человеческий глаз не способен различить бо′льшую плотность.
CSS-пиксели
(CSS pixels) - абстрактная величина, используемая браузерами для точного отображения контента на страницах, вне зависимости от экрана (DIPs: device-independent pixels). Пример:
Соотношение между физическими и CSS-пикселями можно устанавливать так:
device-pixel-ratio,
-o-device-pixel-ratio,
-moz-device-pixel-ratio,
-Webkit-device-pixel-ratio {
…
}
Или так:
device-pixel-ratio,
-o-min-device-pixel-ratio,
min--moz-device-pixel-ratio,
-Webkit-min-device-pixel-ratio {
…
}
В Javascript добиться этого можно, используя
window.devicePixelRatio
Кроме растрового разрешения, изображения в интернете имеют абстрактные размеры в CSS-пикселях. Браузер сжимает или растягивает изображении в соответствии с его CSS-шириной и -длиной. При отображении на обычном экране один растровый пиксель соответствует одному CSS-пикселю. На Retina-экранах каждый растровый пиксель умножается в 4 раза:
А таким на Retina:
Есть несколько способов реализации HTML и CSS-масштабирования:
Где использовать: на одностраничных сайтах с несколькими изображениями.
Где использовать: на сайтах с несколькими изображениями в контенте.
Можно использовать псевдоэлементы:before или:after
.image-container:before {
background-image: url([email protected]);
background-size: 200px 300px;
content:"";
display: block;
height: 300px;
width: 200px;
}
Техника работает и при использовании спрайтов:
.icon {
background-image: url([email protected]);
background-size: 200px 300px;
height: 25px;
width: 25px;
&.trash {
background-position: 25px 0;
}
&.edit {
background-position: 25px 25px;
}
}
Где использовать: на сайтах с ограниченным количеством фоновых изображений (например одним в качестве спрайта).
Где использовать: на сайтах или в приложениях, в которых применяется background-image для элементов дизайна. Не подходит для изображений внутри контента.
Существует специальный Javascript плагин Retina.js , который умеет делать все вышеописанное, но с дополнительными возможностями, такими как пропуск внешних изображений и пропуск внутренних, но не имеющих retina-копий.
Где использовать: на любых сайтах с изображениями в контенте.
В этом примере простое SVG-изображение может быть как угодно масштабировано:
То же самое получится с применением CSS:
/* Использование фонового изображения */
.image {
background-image: url(example.svg);
background-size: 200px 300px;
height: 200px;
width: 300px;
}
/* Использование content:url() */
.image-container:before {
content: url(example.svg);
/* width and height do not work with content:url() */
}
Для поддержки IE 7 или 8 и Android 2.x потребуется использование заменяющих PNG-изображений. Это можно легко сделать с помощью Modernizr :
.image {
background-image: url(example.png);
background-size: 200px 300px;
}
.svg {
.image {
background-image: url(example.svg);
}
}
Для лучшей кроссбраузерности, чтобы избежать проблем растеризации в Firefox и Opera, следует сделать каждое SVG- изображение соответствующим его родительскому HTML-элементу.
В HTML можно реализовать аналогичное с помощью нужного data в теге a:
С использованием jQuery и Modernizr:
$(document).ready(function(){
if(!Modernizr.svg) {
var images = $("img");
images.each(function(i) {
$(this).attr("src", $(this).data("png-fallback"));
});
}
});
Где использовать: на любых сайтах, подходит для иконок, логотипов и простых векторных иллюстраций.
Retina дисплеи и недавно появившиеся Retina HD дисплеи - часто упоминаются при обсуждении продуктов Apple. В этой статье постараемся определить различия данных типов дисплеев, и стоят ли эти дисплеи тех денег, которые за них просят.
Что такое Retina диспдей? Или, какое определение является точным для дисплеев с таким названием?
Retina дисплей - это больше маркетинговый ход, чем технический термин, но и определение данному понятию можно дать: это экран, использующийся в вычислительном устройстве, который имеет высокую плотность пикселей, при которой человеческий глаз не может разглядеть отдельные пиксели. Другими словами, предполагается, что человек не сможет увидеть разницу между фотографией картины, показанной на экране Retina, и самой картиной. Но это только в теории.
Retina - это собственность Apple. Другие компании могут производить экраны с такими же техническими характеристиками, но назвать их Retina, они не смогут. Это товарный знак.
Какое разрешение у Retina дисплея?
Разрешения экранов приводятся в формате "число пикселей" Х "число пикселей". Но ключевым моментом для Retina дисплеев является плотность пикселей (количество пикселей на дюйм). При одинаковых разрешениях экранов (в пикселях) но разных размерах (в дюймах) плотность пикселей будет разной.
Но, даже с точки зрения плотности пикселей, нет единой цифры, котороя квалифицировала экран как Retina, так как при определении Retina дисплеев учитывается, внимание, расстояние экрана от глаз.
На деле, чаще можно встретить следующие показатели плотности пикселей для различных типов устройств:
Есть ли экраны с характеристиками лучшими, чем у Retina дисплеев?
Есть. Есть экраны, которые обладают большей плотностью пикселей. Сама компания Apple, с момента запуска iPhone 6, предлагает использовать улучшенный экран Retina HD. Но многие Android устройства превосходят по данному показателю устройства Apple, например LG G3 - 534 пикселя на дюйм.
Но, если вспомнить наше предыдущее определение Retina, то увеличение плотности пикселей - довольно спорное предприятие, ведь человеческий глаз уже не видит разницы при таких высоких показателях ppi. Об этом говорили сами Apple. Но выпуск iPhone 6 можно расценивать как признание того, что все-таки разницу ощутить можно.
Разница между Retina и Retina HD.
Термин Retina HD - относится только к экранам новых смартофонов Apple. Так чем же превосходит Retina HD своего предшественника:
После недавнего выпуска Retina MacBook Pro и The new IPad, экраны с увеличенной плотностью пикселей начали активно входить в нашу жизнь. Что это значит для веб-разработчиков?
Для начала разберемся в терминологии.
Физические пиксели (device pixel или physical pixel) - привычные нам пиксели: самые маленькие элементы любого дисплея, каждый из которых имеет свой цвет и яркость.
Плотность экрана (Screen density) - это количество физических пикселей дисплея. Обычно измеряется в пикселях-на-дюйм (PPI: pixels per inch). Apple, разработав Retina-экраны с двойной плотностью пикселей, утверждает, что человеческий глаз не способен различить бо′льшую плотность.
CSS-пиксели
(CSS pixels) - абстрактная величина, используемая браузерами для точного отображения контента на страницах, вне зависимости от экрана (DIPs: device-independent pixels). Пример:
Соотношение между физическими и CSS-пикселями можно устанавливать так:
device-pixel-ratio,
-o-device-pixel-ratio,
-moz-device-pixel-ratio,
-Webkit-device-pixel-ratio {
…
}
Или так:
device-pixel-ratio,
-o-min-device-pixel-ratio,
min--moz-device-pixel-ratio,
-Webkit-min-device-pixel-ratio {
…
}
В Javascript добиться этого можно, используя
window.devicePixelRatio
Кроме растрового разрешения, изображения в интернете имеют абстрактные размеры в CSS-пикселях. Браузер сжимает или растягивает изображении в соответствии с его CSS-шириной и -длиной. При отображении на обычном экране один растровый пиксель соответствует одному CSS-пикселю. На Retina-экранах каждый растровый пиксель умножается в 4 раза:
А таким на Retina:
Есть несколько способов реализации HTML и CSS-масштабирования:
Где использовать: на одностраничных сайтах с несколькими изображениями.
Где использовать: на сайтах с несколькими изображениями в контенте.
Можно использовать псевдоэлементы:before или:after
.image-container:before {
background-image: url([email protected]);
background-size: 200px 300px;
content:"";
display: block;
height: 300px;
width: 200px;
}
Техника работает и при использовании спрайтов:
.icon {
background-image: url([email protected]);
background-size: 200px 300px;
height: 25px;
width: 25px;
&.trash {
background-position: 25px 0;
}
&.edit {
background-position: 25px 25px;
}
}
Где использовать: на сайтах с ограниченным количеством фоновых изображений (например одним в качестве спрайта).
Где использовать: на сайтах или в приложениях, в которых применяется background-image для элементов дизайна. Не подходит для изображений внутри контента.
Существует специальный Javascript плагин Retina.js , который умеет делать все вышеописанное, но с дополнительными возможностями, такими как пропуск внешних изображений и пропуск внутренних, но не имеющих retina-копий.
Где использовать: на любых сайтах с изображениями в контенте.
В этом примере простое SVG-изображение может быть как угодно масштабировано:
То же самое получится с применением CSS:
/* Использование фонового изображения */
.image {
background-image: url(example.svg);
background-size: 200px 300px;
height: 200px;
width: 300px;
}
/* Использование content:url() */
.image-container:before {
content: url(example.svg);
/* width and height do not work with content:url() */
}
Для поддержки IE 7 или 8 и Android 2.x потребуется использование заменяющих PNG-изображений. Это можно легко сделать с помощью Modernizr :
.image {
background-image: url(example.png);
background-size: 200px 300px;
}
.svg {
.image {
background-image: url(example.svg);
}
}
Для лучшей кроссбраузерности, чтобы избежать проблем растеризации в Firefox и Opera, следует сделать каждое SVG- изображение соответствующим его родительскому HTML-элементу.
В HTML можно реализовать аналогичное с помощью нужного data в теге a:
С использованием jQuery и Modernizr:
$(document).ready(function(){
if(!Modernizr.svg) {
var images = $("img");
images.each(function(i) {
$(this).attr("src", $(this).data("png-fallback"));
});
}
});
Где использовать: на любых сайтах, подходит для иконок, логотипов и простых векторных иллюстраций.