Здравствуйте,
Взял заказ на вёрстку сайта, нужна мобильная версия. Думаю, как корректно реализовать определение того, что перед нами именно мобильный телефон. Когда-то (в 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. Как следует делать мне и как делаете вы в своей практике
До этого я бутстрапом не пользовался, сейчас только начинаю изучать - как я понимаю, это очень хорошее решение именно для обеспечения "резиновой" вёрстки на мобильных. Хотя немного огорчает то, что он использует флексбоксы - значит с поддержкой старых устройств будет всё очень скверно или вообще никак.
