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

Question

[Александр Попов]

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

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

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

Comments

[Анита Ковалева]

Поддержка флексов на 2019 год чуть ли не идеальна, если вы поддерживаете браузеры < IE10. Используйте сборщик для верстки проекта, к нему прикручивайте autoprefixer и у вас отпадет(+\-) проблема с кроссбраузерностью и отображением сайта на старых браузерах. В крайнем случае всегда можно добавить поддержку через @support если есть прям уж замудренные вещи.

По поводу бутстрапа - из хорошего там, только сетка, в любом случае приходится кастомизировать всё в ручную, и проще понять что и как, когда делаешь ручками. Бутстрап не панацея, особенно когда появилась связка flex+grid.

[Rustam Bainazarov]

Покажите мне хоть один телефон, у которого «виртуальный viewport» (что это такое, кстати? Viewport только один бывает) равен 920px.

Откуда вообще такие данные-то?.. Почему тогда на новейшем Galaxy Note 10+ все сайты спокойно открываются именно в мобильных своих версиях?

[Александр Попов]

И чем мне поможет для поддержки тех же старых Андроидов и Safari @supports?..
Я не знал про неё, каюсь, но вот я загуглил сейчас: https://habr.com/ru/post/178021/
Появилась весной 2013-ого года. Что прикажете делать с дефолтным браузером на Android 2.3 (по сути единственным быстрым, который не лагает на лоу-энд и мидл устройствах того времени), ведь он был выпущен в 2011-ом? Также насколько я знаю, флексы начали разрабатывать в середине-конце 2012-ого, гриды вообще начали появляться только летом 2014-ого (сначала в Firefox, чуть позже в Хроме).

Это всё сильно мимо... Проблема даже не в IE, у него рыночная доля давно падала, ещё до того, как его заменил Edge. Проблема например в том, что в Chrome 21 нормально не работают флексы. В Firefox до версии 51 они тоже работают с огромными косяками и сбоями. В старых операх на движке престо - их поддержки вообще нет, насколько я знаю, чисто по датам. А совсем мне не нужно, чтобы мой сайт во всех этих браузерах отвалился или покорёжился.

Не говоря о том, что в принципе @supports не поможет решить проблему с сайтом, сделанным на флексах (не важно, вручную или через последнюю версию Bootstrap) в браузере, где флексов нет вообще. @supports даже не знаю где может помочь. Где-то, где нужно не допустить применение новых правил более старым браузером, чтобы не искорёжить дизайн? Может, на стыке Firefox версий 50-51 это было бы актуально при условии, что мы пытаемся тьюнить существующую вёрстку на флексах под новый исправленный движок (и то не уверен, там нет нового CSS свойства, за которое можно было бы "зацепиться" логически), в остальных случаях - чисто способ уменьшить число ошибок CSS, выводимых в консоль, в любом случае браузер проигнорирует все свойства, которых не знает.

Про бутстрап - ну да, его хвалят именно за сетку. Хотя как я понял он тяжёлый, и тащит за собой не менее тяжёлую jQuery. Это как бы минус, но если сильно упростит вёрстку - я не против рискнуть, интернет сейчас довольно быстрый у всех.

Про сборщик - уточните пожалуйста, я не понял, какой мне использовать и как, чтобы избежать описанных проблем.

И вы не ответили, правильно ли я сужу, что определять тип устройства по dpi - надёжнее, чем по ширине вьюпорта?

[Анита Ковалева]

Александр Попов, Надеюсь вам за проект платят 4 цены, если вы собираетесь поддерживать старый хлам. Обычно проекты где требуется поддержка 2011-2012 года + устройств старичков = это гос. учреждения, какие-либо жирные проекты где вкладывается очень большая цена, которая окупает себя. Если вы делаете обычный сайт, и заказчик вам говорит что хочет поддержку IE7, можете смело накидывать 2-3 цены на его запрос, обычно желание отпадает разом(бывает отпадает и заказчик). Дирректива @support - для старых браузеров вы отдаете стили написанные на float, для новых браузеров вы отдаете стили flex+grid. Сама директива @support проверяет наличие поддержки браузером стилей, если нет - то применяет старые, которые вы прописываете для старичков.

[Rustam Bainazarov]

Александр Попов, нет, не надёжнее, особого смысла нет в этом. У вас вопрос тянет часы разговоров и разборов технологий. Никто в отрасли так не делает. Все опираются на размер viewport.

Android 2.3? Вы из какого года? :)) Какой у вас пласт клиентов? Это вы из статистики взяли, что у вас куча народа заходит с 2.3 или из головы?

Но вы скажите, откуда информация у вас про такой лютый viewport, когда у iPhone XS — 375px, у XS Max — 414px. У Note 9 стандартные для большинства Android-устойств 360px.

[Rustam Bainazarov]

Александр Попов, с какими ещё косяками flex работает в Firefox <51? Откуда у вас вообще эта информация? Я спокойно все сайты уже три года верстаю на flex, и они все прекрасно работают в IE11, не говоря уже о достаточно свежей версии Firefox. В Firefox 40+ уже всё там было нормально и без геморроя.

[Анита Ковалева]

Рустам Байназаров, Скорее всего у парня субъективное мнение, или он не умеет пользоваться can i use.

[xonar]

Конечно лютый бред я ща прочитал. Media выражения, flexbox, https://caniuse.com вам в помощь. Всё выше вам разложили уже от А и до Я.

[Александр Попов]

Рустам Байназаров, во-первых, кажется при тесте на реальном SGS 4 Mini было больше 920 или 940 (но это было давно, не берусь утверждать, может 640 было всего). Во-вторых - откройте режим эмуляции в Хроме, и поставьте какой-нибудь IPhone или Google Pixel... И сами увидите

Да, вьюпорт один, я криво выразился. Имелись в виду виртуальные точки (в противовес реальным пикселям матрицы).

[Александр Попов]

Анита Ковалева, спасибо, вот только не очень понятно, во что выльется использование этого метода в браузере, который не понимает саму директиву, надо тестить.

Насчёт цены - да заказчик ни на чём не настаивает и ничего не требует. Мне самому совесть не позволит сделать иначе, независимо от цены. Знаете, для меня есть минимальная планка качества. Сайт должен работать везде или почти везде (это если вам захочется вставить сарказм про корректную поддержку IE 6.0 или Opera 9.x, например).

И потом, за что брать в 3 раза больше, если как вы сами сказали, достаточно просто сделать вторую версию на float-ах (а можно ей и ограничиться)? Если не брать старые IE - то и float уже излишество, хватит inline-block, которые я обычно использую.

Я почему хочу перейти на Bootstrap - думаю, что система с предопределёнными именами классов реально сэкономит усилия и позволит делать вёрстку быстрее. Полагаю, можно найти более старую версию, которая работает не на флексах. Это уже буду смотреть по ходу изучения.

[Александр Попов]

Рустам Байназаров, так выдаёт Chrome в режиме эмуляции... Возможно, это его баг, я не знаю. На самом деле, на реальном телефоне цифры скорее всего будут похожи. Завтра протестирую на Samsung A7 2017 и скажу результат :)

Android 2.3? Вы из какого года? :)) Какой у вас пласт клиентов? Это вы из статистики взяли, что у вас куча народа заходит с 2.3 или из головы?

Ну у меня например 2.3, отличная операционка. Ничего лишнего, к железу не требовательна. Уже 4.0 кстати железо не тянет, которое с 2.3 прекрасно справляется.

[Rustam Bainazarov]

Александр Попов, и что я увижу? Вы умеете читать цифры, которые там сверху написаны в режиме адаптивности? Какие 920 px у SGS IV Mini?..

У вас там все сайты запускались в планшетной верстке, скажите?

[Александр Попов]

Рустам Байназаров, информация с Твича, который корёжится в Firefox 45, 47, 49 и 50, но нормально отображается с версии 51. Я даже для него CSS fix лично писал, чтобы поправить эти глюки. На userstyles лежит. Вы сами скачайте portable версию из названных выше и откройте любую страницу, поймёте о чём я говорю.

Я спокойно все сайты уже три года верстаю на flex

Круто, что вы умеете flex, но видимо вы в своих проектах просто не используете те свойства, на которых возникают кроссбраузерные несовместимости. Причём что характерно, у Chrome соответствующих по времени и даже более старых версий этих проблем нет... Это именно баги лисы.

UPD: К сожалению, баг на твиче больше не воспроизводится, теперь и без моего фикса там почти идеально выводится всё. Но он у них был как минимум год. С осени 2018-ого, и весной этого года ещё присутствовал. Жаль я скриншот не сохранил, теперь только через WayBackMachine если смотреть...

[Rustam Bainazarov]

Александр Попов, какие где 900+ px?

Это уже планшетный брейкпоинт, а так же современные телефоны в ландшафте (а-ля iPhone XS).

Первая цифра — ширина, вторая — высота viewport.



Воспользуйтесь этой ссылкой на мобильном, чтобы развеять непонятные мне сомнения:
https://codepen.io/selcukcura/pen/zoJYZz/

Открывать строго в режиме масштаба 1.0:


Если вы вручную не меняли масштабирование системы, то на Android-устройствах с вероятностью 99.9% вы увидите 360px. На iPhone 6, 6S, 7, 8, X, XS с вероятностью 100% вы увидите 375px.

900px viewport на мобильном — это нонсенс. Это вообще без масштабирования получается, т. е. будет открывать такой браузер десктопно-планшетные версии всего (а-ля как режим «Версия сайта для ПК».

[Rustam Bainazarov]

Александр Попов, я тестирую в 20+ версиях браузеров верстку обычно, о чём вы говорите. Я на этих ваших кроссбраузерных проблемах собаку съел за эти годы. Надо знать проблемные места просто, коих у FF ровно столько же, сколько у Chrome. Safari гораздо проблемнее, особенно 9-я версия, которая канула в небытие — вот там реально проблем было немерено.

Safari 10, 11, 12, iOS Safari 10, 11, 12, Chrome 40, 45, 55, 60, 65–текущая, Firefox 40, 45, 50, 55, 60–текущая, EDGE 12–18, IE 11.

[Александр Попов]

Рустам Байназаров, прошу прощения, насчёт 980 похоже я и правда ошибся. Скорее всего, это была высота. Я перепроверю ещё раз, но скорее всего, вы правы.

P. S. На самом деле, несмотря на это недавно я столкнулся с диким багом, который был и на реальных телефонах у людей, и в режиме эмуляции, причём в обоих браузерах. Это заставило меня слегка усомниться в адекватности телефонных версий браузеров =) Если вкратце - шрифт, заданный в стилях как шрифт одного размера, отображался в очень разном размере на одной и той же странице. И единственным способом это исправить было изменение типа родителя с display: inline-block на display: block, или что-то вроде того. Даже нет, ещё забавнее - просто вставка дополнительных <br> так, чтобы явно ограничить строку одним блоком, помогала. Иными словами, браузер почему-то самовольно решал, что надо напихать в одну строчку кучу контейнеров (3 штуки), сжать их по ширине и высоте, а контент пропорционально зуммировать в меньшую сторону (картинки, ссылки, всё сохраняя пропорции), игнорируя(!) выставленные размеры для картинок и размер кегля для ссылок. Я так и не понял, что это было, и какой стандарт разрешает такое поведение.

[Александр Попов]

Рустам Байназаров, так с какой ширины мне стоит переходить на телефонный макет (который портретный)? Примерно 420?

[strelok011]

Что-то мне кажется что все ваши беды из-за незнания мета
meta name="viewport" content="width=device-width,height=device-height"...
А еще можно хорошо работать с media-queries, которые отлично умеют работать как в ориентацией дисплея, так и с плотностью точек для совсем извращенных вариантов https://css-tricks.com/snippets/css/retina-display...
Эти штуки позволяют творить что угодно с адаптивным и респонсивным отображением сайта.

[Александр Попов]

strelok011, спасибо. Про второе я как раз был в курсе. А вот первое не подскажете для чего и что оно делает? Я видел эту конструкцию, ног не понимаю её назначения.

[strelok011]

Александр Попов, https://developer.mozilla.org/ru/docs/Mozilla/Mobi... особенно часть "Пиксель это не пиксель".
Из-за того, что экраны мобильных устройств могут быть и разрешением 2k (и более) с высокой плотностью пикселей на дюйм, пришлось придумывать ухищрения для сохранения читабельности сайта. По факту строка сообщает браузеру, что надо страницу масштабировать так, как если бы физическое разрешение экрана было не 900px по ширине а, скажем, всего 320. И в результате на куче устройств с разными разрешениями мы можем получить примерно одинаковый вид мобильной верстки. Тогда и media-queries будут срабатывать уже для пересчитанных размеров.

[Александр Попов]

strelok011, а, понятно. Ну про виртуальные пиксели я знал конечно же. Но вот не знал, что оно из коробки так не работает. Хотя казалось бы, должно - ведь мобильный браузер прекрасно знает dpi дисплея устройства (в Андроиде можно вроде какой-то метод дёрнуть, чтобы получить dpi системы из конфигов). Непонятно, зачем заставлять вебмастеров писать эту лишнюю строчку, когда можно было бы делать это автоматически.

Добавил, и правда проблема решилась, большое спасибо.

[Александр Попов]

strelok011, прочитал статью, понял, что сложность в том, что мобильный браузер должен нормально отображать "десктопные" сайты, не адаптированные под мобайл, и уметь их произвольно масштабировать.

Но я всё же не вижу большой проблемы: браузер мог бы попытаться отрендерить страницу в ширине, определяемой размером экрана (как при указанном мета-теге), и если она не поместилась в ширину, то есть требуется скролл - отображать её по правилам десктопа, то есть разрешить масштабирование, подобрать наиболее удачный начальный масштаб исходя из размера шрифта на странице и той ширины, на которой скроллинг больше не требуется, и так далее. А если же метатег указан - он мог бы переопределить эти автоматически найденные значения на те, которые нужны разработчику.

Если же скроллинг не нужен даже на относительно малой ширине экрана девайса (в виртуальных пикселях) - то и выводить сайт можно сразу в масштабе один к одному с запретом масштабирования (а если масштабирование всё-таки нужно, то уже задача вебмастера указать это). Так как скорее всего, если скроллинг не нужен, и страница помещается во вьюпорт - она либо полностью свёрстана под текущую ширину (адаптив или мобильный поддомен), либо это служебная страница, где есть только белый фон и 2-3 слова в одном абзаце на нём - в настоящее время такие страницы выводятся крайне мелко и почти не читаемо, пока не увеличишь масштаб, как минимум на моём телефоне 2011-ого года, что как по мне довольно глупое решение.

Что я имею в виду под "умещается"? Ну вот есть у нас страница с кучей абзацев (и например списками между ними). При этом ни у одного элемента не указано свойство width со значением больше нашего вьюпорта (либо указано меньшее, либо стоит в auto). В этом случае контент помещается (на самом деле, не обязательно, потому что есть ещё минимальная требуемая ширина, для абзаца это длина самого длинного слова, для пункта списка - то же самое плюс маркер и отступы, для таблиц - там свой алгоритм, в общем тоже нельзя сжимать бесконечно). В общем, если браузер видит, что всё поместилось (обычно когда нет, у нас появляется возможность скроллинга вправо и белая полоса по правой границе) - можно отображать всё так, как будто этот метатег указан, даже если его случайно забыли. Не вижу причин делать иначе, ведь десктопный сайт заведомо не поместится во вьюпорт из-за кучи элементов, имеющих явно заданный больший размер по ширине, и для них всё будет работать так же, как работает сейчас, то есть ничего не поломается.

[strelok011]

Суть в верном контроле отображения. Можно ставить мета с указанием значения "1", а можно изменить значение масштабирования.
Можно долго обсуждать необходимость и логичность, но это уже к консорциуму w3c и комиссиям :)
Нам же остается использовать те инструменты, которые нам доступны.
Ну и нужно не забывать об удобстве пользователя, чтоб на мобиле кнопка оказывалась под палец а не под курсор мышки. В этом плане управляемое масштабирование позволит с меньшими затратами получить годный интерфейс.