Рубрика «retina display»

Изображения в верстке. Хватит это терпеть

Надеюсь этот пост послужит ликбезом всем веб-дизайнерам, верстальщикам, и проджект-менеджерам. Если вы хороший верстальщик, вас однозначно раздражают растровые изображения. Вы ненавидите растр, и всё, что имеет заметные глазу пиксели. Если это не так, добро пожаловать под кат.
Читать полностью »

В свое время через меня прошла целая масса планшетов на разных ОС, начиная от Barnes&Noble Nook Color и заканчивая топовым на тот момент Новым iPad с Retina дисплеем. Долгое время я пользовался BlackBerry PlayBook, до тех пор, пока Apple не выпустили свой iPad mini.

iPad мини был хорош всем, кроме своего экрана и относительно слабого аппаратного обеспечения (Real Racing, например, тормозил просто безбожно). И когда вышла новая версия iPad mini с дисплеем Retina — я понял, что вот он — идеальный подарок на новый год!

Покупка и обзор iPad mini с Retina дисплеем

Тем более приятной стала новость, что официально продажи в России стартовали фактически одновременно с продажами во всем мире, и по вполне сравнимым ценам. Правда, «старт продаж» оказался не совсем стартом — на официальном российском Apple Store очень долго висела надпись «возможность отправки через 2-3 недели», которая только вчера поменялась на «3-5 рабочих дней», а в магазинах на полках стоят одинокие ценники без реальных устройств.

Но подарок хотелось получить здесь и сейчас — поэтому было принято решение заказывать его из-за рубежа.
Читать полностью »

Почему стоит задуматься о векторной графике уже сейчас?

Retina-дисплеи (спасибо Apple, за удобный маркетинговый термин) уже стали частью нашей жизни. Если вы web-разработчик/дизайнер, и вы не учитываете, как ваша работа отображается на экранах с высоким разрешением, то вы серьезно выпадаете из современных трендов.

Читать полностью »

Семимильными шагами китайская продукция приближается к качеству всемирноизвестных брендов. В данном обзоре я расскажу вам об одном из представителей нового поколения китайских планшетов, ключевой особенностью которых является наличие нового четырехъядерного процессора на архитектуре Cortex A7 и экрана с высокой плотностью пикселей — ONDA V972.
image

image 9.7-дюймовый IPS экран с разрешением 2048х1536
image Двухядерный видеоускоритель PowerVR SGX544MP2 (8 потоковых процессоров)
image четырехъядерный процессор Allwiner A31 на архитектуре Cortex A7
image 2 ГБ оперативной памяти
image Операционная система Android JB 4.1.1
image 16/32 ГБ пользовательской памяти + слот для карт памяти MicroSD
image 2 камеры: задняя 5 Мп и фронтальная 2 Мп
image Коммуникации: Wi-Fi (802.11 b/g/n)
image Дополнительно: USB OTG
image Li-pol аккумулятор емкостью 8000 мАч
image Габариты, масса: 242.6x187.5x9.8 мм, 649 грамм

На рынке планшет представлен в двух цветах — черном и белом. Также доступны версии с 16 и 32 ГБ встроенной памяти, цена за младшую стартует с отметки в 240 долларов.
Читать полностью »

Значение DOM «window.devicePixelRatio» и свойство CSS «device pixel ratio» станут переменными величинамиБолее двух лет прошло после начала продаж iPhone 4 летом 2010 года, и за эти два года сайтостроители привыкли проверять джаваскриптом значение window.devicePixelRatio (или же использовать в CSS медиазапрос device-pixel-ratio) как простое и бесхитростное средство, позволяющее тотчас же выяснить, запущен ли сайт на сетчаточном дисплее (retina display) или нет. Если величина devicePixelRatio равна двойке, то перед нами сетчаточный дисплей (четвёртый iPhone, четвёртый iPod Touch, третий iPad, или более новые устройства, или портативный компьютер «MacBook Pro with Retina Display»); если же величина devicePixelRatio равна единице (или не определена), то перед нами дисплей обычной чёткости.

Чуть сложнее, по сравнению с эппловскими, бывает учёт устройств, работающих под Android: там приходится воспринимать дробные величины, не равные единице или двойке. Peter-Paul Koch сообщил во блогозаписи «More about devicePixelRatio» о том, что (по его наблюдениям) в Nexus One величина devicePixelRatio равна 1,5, тогда как в Galaxy Nexus и в Galaxy Note она равна двум в WebKit и 2,25 в Opera Mobile.

Но эти мелкие отличия не меняют картины в целом: все привыкли думать о значении величины devicePixelRatio как о таком свойстве устройства, которое на одном и том же мобильнике (или планшете, или ноутбуке) остаётся беспрерывно постоянным. В частности, именно на этом были основаны все, все рецепты из хабрахабровских блогозаписей «Адаптируем графику под Retina экран», «Распознаём retina-дисплеи джаваскриптом», «Отображаем карты OpenStreetMap на iPhone 4 с учётом сетчаточного дисплея при помощи Leaflet», «Как отличить версию iPad в Safari», «Оптимизация графики для Retina-экранов», «Комплексная подготовка сайта к Retina» и им подобных.

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

Читать полностью »

Подробный обзор MacBook Pro нового поколения (с Retina дисплеем)

Салют, Земляне!
Обнаружил, что на хабре нет поста, который объединит в себе всё, что необходимо знать про эту чудо-ЭВМ. Поэтому я решил основательно подойти к анализу user-experience, железа, производительности и прочих впечатлений. Спустя месяц полноценного и самостоятельного использования готов поведать вам...Читать полностью »

Новый iPad уже появился в магазинах, не говоря уже про братьев iPhone 4S и iPhone 4, которыми многие давно и успешно пользуются, а вот сайтов, учитывающих возможности отображения дисплеями этих устройств картинок в высоком разрешении, пока не так много. Но есть простой вариант, как сделать свой сайт соответственно тренду «отзывчивым», или на их манер: responsive.Читать полностью »

Еще начиная с Аймаков я привык не обновлять рабочую лошадку каждый раз, когда происходит смена линейки, но пропуская шаги. Как-то так же пошло с начала с айфонами, когда я проигнорировал обе версии 3G, перейдя с первого айфона сразу на четверку, так же получилось и с айпадом. Самый первый айпад продержался у меня вот буквально до прошлой недели, причем последний год он жил со здоровенной трещиной через весь экран, что меня почему-то совершенно не раздражало, а, напротив, придавало девайсу какую-то стимпанковскую прелесть.Читать полностью »

Всякий, кому до сегодняшнего дня доводилось запускать полноэкранный пример работы движка Leaflet на новейших мобильниках iPhone 4, неизменно получал перед собою вот какую карту OpenStreetMap в новоайфоновском разрешении 640×960:

[скриншот]

Как видите, векторный гипертекст (подпись под картою) выглядит существенно лучше по качеству, чем растровый текст (надписи на карте) и чем контуры дорог на карте. Это потому, что растровые картинки на сетчаточном дисплее по умолчанию состоят из квадратов 2×2 реальных (физических) пикселов — стало быть, растровый текст получается угловатым, контуры дорог получаются ступенчатыми, и так далее.

Сегодня это положение дел изменилось к лучшему.

Читать полностью »

После появления сетчаточных дисплеев люди ищут альтернативы PNG-значкам, не зависящие от разрешения. Кто-то влюбляется в шрифтовые значки, другие кричат «SVG». Сожалею, но если вы ищете панацею, то я боюсь, что её не существует. Давайте поближе поглядим, какие у нас есть варианты.

Шрифты со значками восхитительны, но…

они размыты. В них нет настоящей, попиксельной резкости. Да, использование @font-face для значков обрело заметную популярность. Я и сам рекомендовал и даже стал коллекционировать их. Но в таких значках есть изъян, который меня достаёт. Они всё ещё немного размываются на несетчаточных дисплеях (а таких до сих пор подавляющее большинство). Попробуйте поуправлять размером у Криса в демонстрации и вглядитесь попристальнее. Эффект по-разному проявляется у разных размеров, но все они имеют одну и ту же проблему «полупиксельной размытости». Возможно, её заметить не так просто, так что вот здесь я увеличил скриншот пятнадцатипиксельного размера (а заодно и фоновый шум убрал):

Нечёткость значков истомляет нас

Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js