Как правильно делать дизайн и верстать под retina дисплей?

Question

[LB777]

На днях у нас с дизайнером произошла заминка. Он мне прислал макет сайта, я его сверстал пиксель в пиксель. Под виндой на обычном мониторе все выглядет отлично! Но дизайнер начал качать права, что у него на маке все в два раза больше чем чем он рисовал. Т.е. он отрывает исходник psd в фотошопе на 100%, октрывает сайт и разница у них во всех размеров ( шрифтах, блоков, отступов и т.п.) ровна в два раза больше.
Из-за чего такое получается? Кто накосячил, из-за чего на маке шаблон не сходиться с сайтом? Что делать, что бы такого в дальнейшем избежать?

Answer 1

[Rodion Svetlitskiy]

• Забыть о фиксированных величинах, то есть про px и использовать % по максимуму.
  
• Использовать svg вместо png, или увеличивать размер png
  
• Применяя media queries определять экраны с высокой плотностью пикселей и заменять изображения на увеличенные в 2 раза. Можно для этих целей применить javaScript, можно заюзать retina.js
  

Comments

[LB777]

Я в основном все это и использовал, а выражение "пиксель в пиксель" подразумевал, что на ширине 1200px заданной в макете у тебя полностью совпадал сайт с дизайном.
Если взять конкретный пример, но шрифт у меня указан в rem относительно px взятых из макета. На обычном дисплее они выглядят идентично, а на маке этот шрифт в два раза больше чем в макете.
Если я все правильно понял, то дизайнеру надо было рисовать весь дизайн сайта в два раза большей и тогда бы они выглядели одинаково на ретине.

[Faber Estello]

А можно глупый вопрос, мелочь, но я ее не пойму, для ретины нужно сохранять одно и то же изображение в двух разрешениях? И как вычисляется плотность экрана, чтобы потом разрешение писать ?

[Александр Попов]

LB777: разве на ретине всё должно было выглядеть не в два раза меньше? Или так браузеры на маке работают, что там увеличение по дефолту идёт, а в Вашем случае оно как раз всё портит?

Answer 2

[Сашко Бублиенко]

Дизайнер накосячил — нарисовал макет сайта под ретину. Весь веб должен рисоваться под обычное разрешение и только специальная графика (если нужно): иконки, иллюстрации рисуются либо в двух разрешениях (обычном и 2x) либо сразу в SVG. Ну и выше уже ответили, в зависимости от типа экрана в верстке подсовывать соотв. графику.

Comments

[Эдуард Бакшеев]

ДА!!!

Answer 3

[Николай Шабалин]

Рекомендовано к прочтению .
А дизайнеру передай, что он @#?!&, так макеты не сравнивают.

Answer 4

[Нерон Лордов]

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