Введение
Устройства пользователей в наши дни отличаются широким разнообразием: телевизоры, смартфоны, планшеты и даже часы — с каждого из устройств пользователь может захотеть выйти в сеть. А если добавить сюда разные браузеры, которые можно установить на устройство, то получатся тысячи комбинаций того, как можно попасть на ваш сайт.
Вот и я, в ходе работы над своим сайтом портфолио, тестировал его в разных браузерах и наткнулся на проблему.
Проблема
При указании свойства min-width: 320px для тега body в Firefox, контент, при достижении минимальной ширины, не начинает пропорционально уменьшаться как в Chrome (рис. 1), а просто выходит за экран. (рис. 2)
Зачем решать эту проблему?
Допустим, у меня сломался основной смартфон, а в запасе только Samsung Galaxy Mini с шириной экрана в 240px и с браузером Firefox. На таких устройствах, треть контента сайта будет выходить за viewport, что приведет к появлению горизонтального скролла, а это не удобно.
Также поддержка ширины в менее чем 320px, может быть полезна для браузеров в которых есть функция боковых веб-панелей (например Vivaldi).
Поддержка min-width для body в других браузерах
В ходе тестирования в других браузерах, оказалось, что Safari (проверялось на Safari 15) также имеет данную проблему. (рис. 3)
В остальном, свойство min-width для body без проблем работает на всех браузерах с движком Chromium. По крайней мере, кроме Chrome, все работает как положено в последних версиях Edge (105), Vivaldi (5.4), Opera (90.0.4480) и Yandex (102).
Решение
Сначала, я попробовал решить данную проблему путем добавления свойства min-width, не только к тегу body, но и к тегу html, а также обертке контента div class="wrapper", Увы, данный способ не сработал.
В связи с этим, я написал функцию, которая уменьшает контент при достижении определенной ширины экрана. Она сравнивает ширину контента страницы с доступной шириной окна (viewport), а затем уменьшает страницу так, чтобы эти значения оставались равны.
Способ 1. Функция масштабирования через transform: scale()
Для масштабирования с изменением размера существует CSS свойство zoom, которое не только масштабирует элемент как свойство transform: scale(), но и пропорционально меняет его размеры, влияя на окружение. К сожалению, в Firefox свойство zoom не поддерживается (Can I Use Zoom). Именно поэтому для масштабирования страницы применяется связка свойств transform: scale() и width. В данном случае, если использовать только свойство transform: scale() и не влиять ширину, контент будет выглядеть хорошо, однако горизонтальный скролл останется. (рис. 4)
CSS свойства применяются к тегу html, так как на теге body установлено свойство min-width и свойство width не будет работать.
Ниже приведен пример работы готовой функции transform-function.js. (рис. 5)
Способ 2. Функция масштабирования через мета-тег viewport
Спустя некоторое время после выпуска статьи и дискуссий в комментариях, @delphinpro предложил вариант решения проблемы с использованием функции корректирующей мета-тег viewport, ведь мобильные браузеры автоматически адаптируют страницу ориентируясь на него.
Главным преимуществом данного способа является то, что, так как все изменения происходят с помощью внутренних сил браузера, итоговая реализация масштабирования является в разы более надежной по сравнению с использованием метода transform: scale + width.
Недостатком этого варианта заключается в том, что функция запускается один раз и при изменении размера окна появляется горизонтальный скролл (рис.7). Учитывая то, что в мобильном устройстве размер окна практически никогда не изменяется, этот вариант почти идеален. Так как в случае с изменением ориентации экрана, функция работает без ошибок.
Ниже приведен пример работы готовой функции meta-width-function.js (Ширина экрана не меняется, доступно изменение ориентации экрана) (рис. 7)
О том как использовать функции
Для начала, зайдите на репозиторий GitHub: https://github.com/fazdendev/adaptive-body-min-width
Выберите вариант реализации масштабирования. В обоих вариантах, функция запускается, когда ширина экрана становится меньше или равна переданному в нее значению.
В файле transform-function.js масштабирование происходит за счет изменения свойств body - transform: scale() и width. Преимуществом данного метода является то, что функция работает как и на ПК, так и на мобильных устройствах.
В файле meta-width-function.js масштабирование происходит за счет изменения мета-тега viewport, путем добавления к нему фиксированной ширины взятой из min-width. Преимуществом данного метода является то, что все изменения происходят силами браузера. Из-за этого функция работает надежнее и менее инвазивно. Недостаток такого способа заключается в том, что он работает только в мобильных браузерах.
Откройте выбранный вариант и скопируйте код к себе в проект, вызовите функцию adaptiveSizePageScaleInit(300).
В качестве аргумента передайте в нее ширину окна браузера, при котором она должна запускаться, если аргумент не указан, функция возьмет значение ширины из min-width body. При передаче аргумента вручную, очень важно, чтобы ширина body min-width была равна значению переданному в функцию.
Если необходимо, чтобы функция запускалась только в определенных браузерах, уберите вызов функции adaptiveSizePageScaleInit(), после чего скопируйте функцию вызова кода в определённых браузерахstartOnSpecificBrowserInit().
В функции startOnSpecificBrowserInit() выберете браузеры, в которых функция должна работать, путем замены строки "НЕОБХОДИМЫЙБРАУЗЕР" из условия кросс-браузерный функции на нужный вариант из списка: "other", "msEdge", "chrEdge", "opera", "сhrome", "ie", "firefox", "safari".
Условие, в котором нужно менять строку:if (browser == "НЕОБХОДИМЫЙБРАУЗЕР") {adaptiveSizePageScaleInit()}
Заключение
Я надеюсь, что эта статья была вам полезна!
Если у вас есть какие вопросы, советы или предложения по решению данной проблемы, пишите, я буду рад обратной связи.
Ну а на этом все, надежного вам адаптива и хорошего дня!)
