@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. Как следует делать мне и как делаете вы в своей практике

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

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

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