Comments 15
А потом пользователь из-за таких горе-разработиков вынужден зуммировать страницу, чтобы хоть что-то прочитать, и таки любуется горизонтальным скроллом. Хорошую адаптивность под любые размеры экрана без потери читаемости можно увидеть тут. Работает она даже без скриптов.
помню когда я первый раз сделал горизонтальный скрол и узнал что его можно крутить только с зажатой shift это был шок )
в 2022 еще не добавили нормальной адаптации из коробки или все так применяют хаки с разворотами?
Да, универсальной пилюли, чтобы стало хорошо, пока нет (а может никогда и не будет). Но на самом деле, все не так плохо. Постоянная доработка Flex и Grid, новые свойства вроде clamp, min и max, сильно упрощают жизнь разработчика.
Если посмотреть со стороны, мы движемся в прекрасный мир адаптива без мороки, где нам доступно все больше и больше инструментов. Хотя как и везде, повозка движется, но движется медленно, т.к все тянут её в разные стороны, кто-то вводит то, кто-то это. Те же самые Mozilla ввели поддержку gap для Flexbox на два года раньше Chrome, но не могут исправить работу min-width для body.
И именно поэтому, пока ждём что-то хорошее и универсальное, но даже когда такое появится, использовать не будем, а будем снова ждать, года два, пока все начнут поддерживать это.
Что-то не совсем понял, а зачем вообще на теге body устанавливать min-width? Почему у меня сайт спокойно ресайзится вплоть до +-180px без всяких скроллбаров? Вешать обработчик на resize event и без debounce? Нет. Спасибо. Сами создали проблему. Сами же ее решили. Молодцы.
Устанавливать min-width для body или нет зависит от того, хорошо ли адаптируется контент на сайте или нет. Если на сайте за viewport выходят правильно адаптированные изображения, они и до 60px будут резиниться, а если за экран выходит заголовок с размером шрифта в 50px, максимум, что может сделать браузер, это перенести слова на новую строчку, а если слово большое, разрывать его не разрешено, оно просто выйдет за viewport и создаст горизонтальный скролл.
Да, безусловно, с помощью медиазапросов можно и тот же самый текст адаптировать, изменяя его размер, вплоть до устройств с шириной экрана в 100px, но тут уже вопрос рациональности. Зачем вручную оптимизировать сайт под очень редко используемые устройства (ширина большинства смартфонов более чем 320px), если можно больше времени уделить хорошему адаптиву для смартфонов в 320px, а затем указать min-width для body и использовать функцию, которая в итоге справится не хуже, а время сэкономит.
P.S. Пожалуйста, скиньте ссылку на сайт про который вы говорите. Уж очень хочется узнать, как там реализован адаптив.
Вариант решения проблемы с крупными заголовками:
h1 {
font-size: 40px;
font-size: clamp(1.1em, 8vw, 2.7em);
}Если, например до 150px, нужно адаптировать лишь небольшое количество элементов, а не весь сайт вручную, то вполне себе вариант.
И раз уж речь зашла про font-size есть формула CSS и миксин SCSS, которые дадут более обширную поддержку адаптивности в разных браузерах. Они основаны на свойстве calc, и преимущество этого метода заключается в том, что данный способ поддерживается в Chrome и Firefox 20-x версий (clamp 70+) и в IE 11.
Ссылка на статью: https://habr.com/ru/post/501392/
Зачем делать ручное масштабирование, если это можно отдать на откуп браузеру?
Мобильные браузеры ориентируются на meta viewport, это и используем.
В крайне редких случаях, когда приходится фиксировать минимальную ширину body я просто корректирую javascript-ом вышеназванный тег viewport
gist.github.com/delphinpro/a962978d668b63e046889efd1073a67c
В примере min-width: 640px
Код помещается в шапку страницы и отрабатывает один раз. Учитывая, что в мобильном устройстве изменить размер окна (почти) нельзя, это норм.
Хотя, если нужно учесть поворот в альбомный просмотр, то можно обернуть в слушателя matchMedia.
Возможно, это не будет работать в режиме просмотра devtools, но ведь этого и не требуется. В этом режиме достаточно просматривать на минимальной ширине.
Спасибо за вклад в решение проблемы!
Действительно, даже несмотря на то, что метод не работает в режиме просмотра devtools, сейчас все проверил, и на телефоне все работает прекрасно. Так что, в течение недели, сделаю фото того, как это работает на смартфоне, модифицирую вашу функцию, сделаю гайд по ее использованию и добавлю все в статью.
Если честно я не очень понимаю, почему браузер должен дополнительно что-то масштабировать. В свойстве указано - минимальная ширина такая-то. Это значит, что разработчик сайта принял такое решение. Таким он видит свой сайт - почему браузер должен что-то дополнительно делать? Если некомфортно что-то просматривать - есть режим для чтения. Тут уже браузер и пользователь решают как они хотят читать контент.
Если дизайнер и разработчик не хотят видеть на своем сайте определенную категорию людей - это их решение и их профессиональные качества. Как раз считаю поведение Chromium браузеров по сути нарушением стандарта, недокументированным поведением
Добавление масштабирования страницы при ширине экрана меньше чем body min-width в браузерах Firefox и Safari