Обновляем свой сайт joomdesign.ru: дизайн, логотип, адаптивная верстка. Но при заходе на сайт с iphone или ipad, которые имеют ретина дисплей видим, что логотип немного размыт. Немного — это если уменьшить масштаб дисплея в два раза, то он будет хорошо смотреться, а так — весь в пикселях.

Градиентные кнопки, тени — это все отлично смотрится через CSS3, а картинки приходится менять. Как это сделать — расскажу ниже.

У нас есть фрагмент верстки

<div class="hlogo"></div>

Кусок из CSS

a.logo{
   display: block;
   width: 190px;
   height: 115px;
   background: url(../images/logo.png) no-repeat #b52727;
}

Умножаем ширину и высоту изображения на 2. Получаем, что логотип должен быть размером 380x250px. Готовим это изображение, кладем рядом с предыдущим.

Теперь в верстке, после подключения основных стилей, добавляем строчку:

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" href="../css/retina.css">

Теперь на всех устройствах с ретина дисплеем будет подключаться дополнительный файл стилей, в котором мы подменим изображение. В файле retina.css пишем:

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
   a.logo{
      content:url(../images/logo_retina.png) no-repeat #b52727;
   }
}

Результат: