dalv_happy
@dalv_happy

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

Добрый день!
Я правильно понимаю, что у экранов с window.devicePixelRatio === 1 400px будет отображаться как 400px.
Если window.devicePixelRatio === 2 400px будет отображаться как 800px. Поэтому в коде я должен устанавливать стили не 400px, а 200px.
Просто есть такая трабла на ретине блок выглядит больше
  • Вопрос задан
  • 872 просмотра
Пригласить эксперта
Ответы на вопрос 3
Torin_Asakura
@Torin_Asakura
Senior Web & Mobile Developer
Привет.
Да, всё примерно так и выглядит, но, есть нюансы - dpi, а выглядит это примерно следующим образом
@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    /* retina rules here */
}

Подробней можно потыкать тут
Ответ написан
vicodin
@vicodin
Имею некоторый опыт
неправильно, вы с таким подходом будете везде километровые фонтсайзы юзать. Верстайте как обычно, просто картинки в 2х сохраняйте. Если уж совсем хотите заморочиться юзайте srcset
Ответ написан
profesor08
@profesor08 Куратор тега CSS
Добавляешь 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">
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы