Как адаптировать под Retina экран вёрстку?

Question

[Username]

Добрый день!
Я правильно понимаю, что у экранов с window.devicePixelRatio === 1 400px будет отображаться как 400px.
Если window.devicePixelRatio === 2 400px будет отображаться как 800px. Поэтому в коде я должен устанавливать стили не 400px, а 200px.
Просто есть такая трабла на ретине блок выглядит больше

Answer 1

[Anton Filippov]

неправильно, вы с таким подходом будете везде километровые фонтсайзы юзать. Верстайте как обычно, просто картинки в 2х сохраняйте. Если уж совсем хотите заморочиться юзайте srcset

Answer 2

[Andrew Ghostuhin]

Привет.
Да, всё примерно так и выглядит, но, есть нюансы - dpi, а выглядит это примерно следующим образом

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    /* retina rules here */
}

Подробней можно потыкать тут

Comments

[Username]

Эта же статья открыта)

[Andrew Ghostuhin]

Тогда в чём вопрос?

[Username]

Andrew Ghostuhin, нужно на чистом js реализовать, без медиа запросов

[Andrew Ghostuhin]

Ааааааааа, js, всё, догнал, именно чистый? Или реакт покатит?

[Username]

Andrew Ghostuhin, да без разницы, можно и реакт, мне главное механику понять работы с devicePixelRatio

[Andrew Ghostuhin]

https://github.com/contra/react-responsive - самый, что ни на есть живой пример
Я раньше пользовался is-mobile пакетом для определения типа устройства и выдачи нужного лэйаута, а потому решил посмотреть в ту же сторону и нашёл забавный пакет который детектит ретину https://www.npmjs.com/package/is-retina

[shkuter]

Username, https://developer.mozilla.org/ru/docs/Web/API/Wind...

Answer 3

[profesor08]

Добавляешь viewport, например как на тостере:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

Comments

[itsjustmypage]

За user-scalable=0, maximum-scale=1.0 нужно по рукам бить

[profesor08]

itsjustmypage, ищешь админов тостера, хватаешь их и бьешь по ручкам.

[Владислав Лысков]

казалось бы, причем тут ретина