How to work with retina PSD layouts?

Question

Layout

Friends, we need your help. They sent a layout in PSD format, I start to typeset, and in the browser all the sizes of the elements, the indents seem to be approximately 1.5-2 times larger than in the layout. All dimensions are in px. It's the first time I've come across this. Is this a layout issue or am I doing something wrong? Thank you in advance.

Answer 1

There are no retina layouts. Retina is nothing more than a marketing name for high resolution screens (300+ px per inch). Retina can only be resources , for example, images, which will have several times the resolution of the target layout in order to fall into the real-resolution pixel grid.
You typeset not for the screen dimensions in physical px, but for the viewport with its “virtual” px, which are obtained from:
[physical resolution] : [zoom level]
The higher the resolution for equal screen sizes, the smaller it gets if the scale is 1: one. Therefore, it is customary to zoom in, otherwise everything is small-small. Thus, high definition + adequate sizes of elements on the screen (retina effect) are achieved.

Add. information about correct scaling

Кстати, если используется масштабирование, то желательно, чтобы масштаб вообще был кратен двум (x2, x4…) для попадания в пиксельную сетку экранов, ибо так получаем меньшее влияния субпиксельного сглаживания, но это задача производителей устройств, а не нас с вами.
На данный момент в том же iPhone XS используется нечётное масштабирование x3 не потому, что так хорошо, а потому что для нормального масштаба x4 нужно очень сильно увеличить разрешение экрана, а это дорого и не очень энергоэффективно.
А на OLED-экранах ещё есть богомерзкий PenTile, из-за которого контрастные контуры выглядят пиксельно даже на очень высоком разрешении…

So, the old iPhone 6 and iPhone XS have the same viewport size (375px), but the real resolution is very different: 750px vs 1125px . This is achieved using the scale: x2 for the iPhone 6 and x3 for the iPhone XS.
The layout should be 1:1 to the target viewport size, not to the physical screen resolution. Because after all the manipulations with scaling, we still have a clear value for the viewport size, and it is on it that we need to focus.
The presence or absence of retina in this case is absolutely not important to you, because you typeset for clear viewport sizes, which can be the same on devices with completely different physical resolutions: for example, a viewport width of 375px (like the iPhone XS) can be achieved on an ancient VGA screen , shrinking the browser window to these 375px.

Why then at all retina-resources

Retina-ресурсы по сути бывают только растровыми, ибо векторные картинки, шрифты и вёрстка в целом масштабируются без потери качества. Этого нельзя сказать о всяких JPG'ах, поэтому если вы на iPhone 6 загрузите картинку 375px по ширине — да, она будет равна размеру viewport, но будет выглядеть размыто, потому что физическое разрешение экрана — 750px, а картинка по сути масштабируется в два раза, теряя в визуальном качестве.

If your layout text is 15px, then make it 15px. I hope, by the way, that the layout was made for you by a not completely repulsed designer who did not forget to put px instead of pt in the layout for texts. Otherwise, either adjust by eye, or try to convert them to px, based on the selected print density in the layout document settings. Because pt is a relative unit for printing, the web does not have it.
There are unique designers who make layouts twice the required size, like, damn it, retina x2. And if I have a retina x3 - what should I do then? Or they make layouts of generally unknown sizes. Yes, and in Photoshop, web layouts in 2019 are no longer necessary, of course.
CSS and HTML have scale detection methods to load the right resource based on its scale.
UPDATE. The layout is in order, it's all about layout skills.