@popov654
Специалист в области веб-технологий

Как правильно адресовать стили для мобильных телефонов?

Здравствуйте,

Взял заказ на вёрстку сайта, нужна мобильная версия. Думаю, как корректно реализовать определение того, что перед нами именно мобильный телефон. Когда-то (в 2011-2013) я делал такое опираясь исключительно на ширину экрана, но сегодня такое не работает. Например, у самых популярных моделей Samsung виртуальный вьюпорт в CSS пикселях - от 920 до 980 пикселей. При этом хотелось бы выводить на телефонах именно телефонный макет. Но тем временем, ширина 980 может быть и на десктопах в режиме зауженного окна, и на каких-нибудь очень старых планшетах с низким dpi. Поэтому, кажется логичным опираться на device-pixel-ratio в Media Query: у смартфонов он будет существенно выше при равной ширине.

Но сейчас я начал читать документацию к последней версии Bootstrap, и там брейкпоинты определяются именно по ширине в пикселях: https://bootstrap-4.ru/docs/4.1/layout/overview/#r...

Вопрос такой:

1. Почему у них реализовано именно так
2. Как оно у них работает
3. Как следует делать мне и как делаете вы в своей практике

До этого я бутстрапом не пользовался, сейчас только начинаю изучать - как я понимаю, это очень хорошее решение именно для обеспечения "резиновой" вёрстки на мобильных. Хотя немного огорчает то, что он использует флексбоксы - значит с поддержкой старых устройств будет всё очень скверно или вообще никак.
  • Вопрос задан
  • 147 просмотров
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
R52.RU Нижний Новгород
от 30 000 до 50 000 руб.
Spice IT Recruitment Москва
До 200 000 руб.
Sveak Барнаул
от 50 000 руб.