Разрешение экрана макбука, например, 2880x1800.
Однако для вас это те же 1440x900, где каждый пиксель представлен двумя.
Т.е. верстайте как-будто ретины и нет.
Единственное что вам следует помнить: все растровые изображения лучше подготовить для ретины.
Причем для контентных элементов (картинки в статьях например) вопрос необходимости открытый и методы свои.
Для элементов интерфейса, я считаю, вопроса не стоит вовсе - готовить нужно.
Как готовить?
Либо используйте svg, либо png в 2-кратном размере.
То есть если у вас иконка 20*20px, её картинка должна быть 40*40 и примерно следующие css-свойства:
.icon {
background-image: url(icon.png);
background-size: 20px 20px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx), only screen and (min-device-pixel-ratio: 2) {
background-image: url(icon@2x.png);
}
Про то что лучше собирать иконки в спрайты и т.д. и т.п. рассказывать не буду.
