- Как изменить масштаб страницы html
- Добавление масштабирования страницы при ширине экрана меньше чем body min-width в браузерах Firefox и Safari
- Проблема
- Зачем решать эту проблему?
- Поддержка min-width для body в других браузерах
- Решение
- Способ 1. Функция масштабирования через transform: scale()
- Способ 2. Функция масштабирования через мета-тег viewport
- О том как использовать функции
- Заключение
- Как изменить масштабирование html страницы?
- Войдите, чтобы написать ответ
- Div для секции с отзывами неправильно выравнивается с Bootstrap. Как решить эту проблему?
Как изменить масштаб страницы html
Други умоляю помогите.
Я уже вторую неделю мозк ломаю — ничего не смысля в СSS и HTML, но понял вот что:
1) У меня на странице все картинки и поля расположены абсолютно и в пикселях;
2) MediaQures не подходит — приходиться все переписывать;
3) Сайт моделировал в WebPageMaker
Неужели нельзя вставить где-то код (подозреваю, что на JAVA), чтобы при различных разрешениях браузера страница масштабировалась полностью (все сразу) так как если бы мы зажали сtrl + крутанули колесико в зависимости от разрешения браузера. Или другими словами если мы тянем за угол страницы уменьшая ее размер, то все содержимое пропорционально уменьшается.
Поставьте на путь истинный слепого чайника!
Untitled "keywords" content="Пицца, google, yandex, rambler, meta, доставка, ресторан, кафе"> "text/html; charset=1251"> "author" content="DJTreeno"> "generator" content="Web Page Maker"> "text/css"> /*----------Text Styles----------*/ .ws6 .ws7 .ws8 .ws9 .ws10 .ws11 .ws12 .ws14 .ws16 .ws18 .ws20 .ws22 .ws24 .ws26 .ws28 .ws36 .ws48 .ws72 .wpmd /*----------Para Styles----------*/ DIV,UL,OL /* Left */ "text/css"> a.style1:link a.style1:visited a.style1:hover a.style1:active "text/css"> div#container < position:relative; width: 1721px; margin-top: 0px; margin-left: auto; margin-right: auto; text-align:left; >body "#5B2C1C"> "container"> "g_image1" style="position:absolute; overflow:hidden; left:260px; top:0px; width:1200px; height:1800px; z-index:0">"images/Задний фон.png" alt="" title="" border=0 width=1200 height=1800> "g_image2" style="position:absolute; overflow:hidden; left:260px; top:460px; width:1200px; height:340px; z-index:1">
Добавление масштабирования страницы при ширине экрана меньше чем body min-width в браузерах Firefox и Safari
Устройства пользователей в наши дни отличаются широким разнообразием: телевизоры, смартфоны, планшеты и даже часы — с каждого из устройств пользователь может захотеть выйти в сеть. А если добавить сюда разные браузеры, которые можно установить на устройство, то получатся тысячи комбинаций того, как можно попасть на ваш сайт.
Вот и я, в ходе работы над своим сайтом портфолио, тестировал его в разных браузерах и наткнулся на проблему.
Проблема
При указании свойства 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 , Увы, данный способ не сработал.
В связи с этим, я написал функцию, которая уменьшает контент при достижении определенной ширины экрана. Она сравнивает ширину контента страницы с доступной шириной окна (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)
О том как использовать функции
Выберите вариант реализации масштабирования. В обоих вариантах, функция запускается, когда ширина экрана становится меньше или равна переданному в нее значению.
В файле 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 == «НЕОБХОДИМЫЙБРАУЗЕР»)
Заключение
Я надеюсь, что эта статья была вам полезна!
Если у вас есть какие вопросы, советы или предложения по решению данной проблемы, пишите, я буду рад обратной связи.
Ну а на этом все, надежного вам адаптива и хорошего дня!)
Как изменить масштабирование html страницы?
Делаю сайт, хочу сделать кнопки для увеличения уменьшения масштаба страницы, чтобы дублировали функционал Ctrl + колесо прокрутки. Возможно ли сделать такое посредством javascript / css / третий вариант? Считывать масштаб как я нагуглил можно посредством devicePixelRatio, а как его устанавливать так и не нашел.
Заранее спасибо за ответы.
document.body.style.transform = 'scale(' + ваше_значение + ')';Но это никакое отношение к тому свойству масштаба в меню браузера не имеет. Это только мнимая магия CSS преобразований.
PS: А вообще, как-то не очень дублировать то, что есть в браузере из коробки. Времена, когда каждый второй рисовал циферблат часов времени пользователя на страничке уже давно прошли.
Вариант с transform: scale() не подходит потому что он растягивает страницу а не увеличивает ее масштаб.
Если указывать 1 параметр то страница становится больше по ширине и появляется скролл, если указывать 2 параметра чтобы бала ширина 1 а высота х, он растягивает страницу по высоте.
При стандартном масштабировании браузера такого не происходит, увеличивается только шрифт сказал бы я, но похоже что это тоже не так, потому что при изменении размера шрифта на тег body иногда ?съезжают стили?( текст выходит за границы контейнеров ), когда при стандартном масштабировании браузера такого поведения не наблюдается.
Я просто искал простое и красивое решение которое бы завелось из коробки и поехало )
PS: А вообще, как-то не все пользователи такие же прошареные как программисты, большинство из них не знает про функцию масштабирования браузера, даже не то что про хот кеи, а вообще что меню браузера можно показать нажатием клавиши Alt.