Как сверстать моб. версию сайта для разных экранов с высокой плотностью пикселей на дюйм?

Question

[Snatch08]

Доброго дня, Сенсеи! Как быть с Retina и другими экранами с высокой плотностью пикселей на дюйм? При разработке мобильной версии сайта возникает проблема с пикселями. На iPhone высокое разрешение и элементы получаются меньше, чем нужно. Можно ли задать css в px, не прибегая к vh, vw, vmin, vmax, em, rem, так, что бы на всех смартфонах получалась одинаковая картина?

Comments

[Ivan Bogachev]

На iPhone высокое разрешение и элементы получаются меньше

Эм... Ну по идее все эти ретины не влияют на размер элементов, они лишь позволяют показать пользователю "более качественные" картинки. У нас же в CSS пиксели - это абстрактные пиксели, а не физические. Вы уверены, что ваша проблема связана именно с их плотностью, а не еще с чем-то?

[Snatch08]

Ivan Bogachev, ну да, с ретиной то красивше, но мне нужно сделать что то типо того:

#container{
  width: 100%;
  max-width:  640px;
}

640 на планшете размер такой должен получится, но если открыть с айфона, то он из 640 грубо говоря 320 сделает

[Ivan Bogachev]

Snatch08, Ну так у айфона ширина в 320 CSS-пикселей. А вы говорите "сделай мне width в 100%". Получается 100% = 320px. Это вписывается в ограничение в 640px сверху. Все работает так, как и должно.

[Snatch08]

Ivan Bogachev, экраны с высоким PPI визуально уменьшают все объекты в 2-3 раза. Кнопка 80x80 px, превратится в 40х40 px

Answer 1

[Владимир]

https://developer.mozilla.org/en-US/docs/Mozilla/M...
Это для того чтобы ретина не была крохотной
А вот по поводу

Можно ли задать css в px, не прибегая к vh, vw, vmin, vmax, em, rem, так, что бы на всех смартфонах получалась одинаковая картина?

Смотри у тебя есть экран 320 пикселей и 480 каким образом не прибегая к относительным размерам ты хочешь получить одинаковый вид задавая размер в пикселах?

Почитай про css media query, image set отзывчивый дизайн и резиновый дизайн и используй все это

Comments

[Snatch08]

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

Я так понимаю эта запись должна полностью решить мою проблему? Типо подгоняет css под экран?

"Смотри у тебя есть экран 320 пикселей и 480" - Ну у меня не все в пикс. естественно, что-то в %.

Примерно так у меня:

#container{
  width: 100%;
  max-width:  640px;
}

c width: 100% понятное дело проблем не возникает, но с max-width: 640px проблемы, т.к у как iPhone 640 покажет как 320.. ну думаю поняли смысл

[Владимир]

Snatch08, Как раз проблему разницы css ширины и физической ширины решвает вьюпорт, как я уже написал

[Snatch08]

Владимир, Спасибо большое, Вы очень мне помогли!)