Hello world

Как изменить масштабирование html страницы?

Делаю сайт, хочу сделать кнопки для увеличения уменьшения масштаба страницы, чтобы дублировали функционал Ctrl + колесо прокрутки. Возможно ли сделать такое посредством javascript / css / третий вариант? Считывать масштаб как я нагуглил можно посредством devicePixelRatio, а как его устанавливать так и не нашел.
Заранее спасибо за ответы.

document.body.style.transform = 'scale(' + ваше_значение + ')';

Но это никакое отношение к тому свойству масштаба в меню браузера не имеет. Это только мнимая магия CSS преобразований.
PS: А вообще, как-то не очень дублировать то, что есть в браузере из коробки. Времена, когда каждый второй рисовал циферблат часов времени пользователя на страничке уже давно прошли.

Вариант с transform: scale() не подходит потому что он растягивает страницу а не увеличивает ее масштаб.
Если указывать 1 параметр то страница становится больше по ширине и появляется скролл, если указывать 2 параметра чтобы бала ширина 1 а высота х, он растягивает страницу по высоте.
При стандартном масштабировании браузера такого не происходит, увеличивается только шрифт сказал бы я, но похоже что это тоже не так, потому что при изменении размера шрифта на тег body иногда ?съезжают стили?( текст выходит за границы контейнеров ), когда при стандартном масштабировании браузера такого поведения не наблюдается.
Я просто искал простое и красивое решение которое бы завелось из коробки и поехало )
PS: А вообще, как-то не все пользователи такие же прошареные как программисты, большинство из них не знает про функцию масштабирования браузера, даже не то что про хот кеи, а вообще что меню браузера можно показать нажатием клавиши Alt.

Войдите, чтобы написать ответ

Как скрывать блок по клику за его пределами?

Как правильно использовать get и set в классах?

Источник

Добавление масштабирования страницы при ширине экрана меньше чем 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 == «НЕОБХОДИМЫЙБРАУЗЕР»)

Заключение

Я надеюсь, что эта статья была вам полезна!

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

Ну а на этом все, надежного вам адаптива и хорошего дня!)

Источник

viewport meta tag, масштабирование веб страниц в мобильных браузерах

Так уж сложилось, что мобильные браузеры появились сравнительно недавно, а сайтов в сети к тому времени уже было огромное количество. Естественно, все эти сайты совсем не были оптимизированы под маленькие экраны смартфонов, а смартфоны в свою очередь, вынуждены были полагать, что все сайты в ширину занимают где-то около 1000px (980px в сафари). Нужно было как-то решать сложившуюся ситуацию и в apple придумали метатег , который по традиции потом сперли все остальные производители браузеров.

Давайте рассмотрим типично-эпичную верстку сайта:

html

      
Hello world
   

Откроем его в мобильном браузере. Вот что мы увидим:

Как вы правильно заметили, текст слишком мелкий и произошло это потому, что сафари попытался вместить наш сайт (который по его предположению сделан для браузеров с шириной экрана около 980pх)

Давайте теперь сообщим браузеру, что наш сайт адаптирован для любой ширины экрана.

html

Ну вот, теперь все намного лучше. Обозначив width=device-width , мы сказали браузеру, что нам нужна область просмотра контента, равная ширине экрана мобильного устройства.

Можно вручную задать значение для width. Например content=»width=320px» , но этого не рекомендуется делать, потому-что различные смартфоны могут иметь абсолютно различную ширину экрана.

Очень распространенным вариантом является:

html

такой вариант задает ширину страницы и начальный масштаб (в данном случае без масштабирования)

Также часто используется следующий вариант:

html

Такие значения используют в случае, если сайт будет использоваться и функционировать как мобильное приложение. Т.е

1. при загрузке страницы она не будет смасштабирована
2. страница займет всю ширину мобильного браузера
3. запрещено любое пользовательское масштабирование
4. доступен только горизонтальный и вертикальный скролл

Используйте эту конфигурцию, только в том случае, если знаете, что делаете.

Давайте разберем допустимые параметры и их значения, доступные в мета теге viewport

width

Целое число (от 200px — 10,000px) или “device-width”.

Задает ширину viewport. Если нирина viewport не указана, то:

• для мобильного Safari это 980px
• Opera — 850px
• Android WebKit — 800px
• IE — 974px

height

Целое число (от 223px до 10,000px) или “device-height”

задает высоту viewport. 99% случаев, просто не обращайте внимания на этот параметр, но если сильно надо – пробуйте и экспериментируйте. Удачи..

initial-scale

Доступные значения (от 0.1 до 10).

1.0 — не масштабировать. Задает масштаб страницы. Увеличиваем значение – увеличиваем масштаб.

user-scalable

Доступные значения no или yes

Задает возможнось изменения масштаба страницы. По-умолчанию установлено как yes в Safari.

minimum-scale и maximum-scale

Доступные значения (от 0.1 до 10).

1.0 — не масштабировать. Определяет минимальный и максимальный масштаб viewport соответственно.

По-умолчанию в мобильном Safari minimum-scale = «0.25» , maximum-scale = “1.6”.

Совет: Не используйте мета-теги (в том числе и этот), пока не разобрались, зачем все это нужно. И тестируйте все в различных мобильных браузерах. Удачи!

18 comments on “ viewport meta tag, масштабирование веб страниц в мобильных браузерах ”

Все хорошо, но у меня вот проблема с текстом на страницах, почему-то на всех компьютерах проблем нет, а на КПК текст не занимает всю ширину а только 60% хотя заголовки на всю ширину. Сколько пытаюсь использовать min-width и max-width результата никакого, не сталкивались с такой проблемой?

Та же самая проблема. Пример тот же хабр http://joxi.ru/crzyUv3JTJCpeU8x_Dk Возможно как то растянуть текст на ширину блока. Спасибо.

Это Андроид-браузер или Опера-мобайл? Там есть такая фича, позволяющая вписать текст в ширину экрана при 100%-м масштабе, сохранив общую раскладку страницы и картинки нетронутыми (чтобы увеличенный до 100% текст не приходилось при чтении скроллить по горизонтали). Всегда считал, что это не «исправляется», да и не нуждается в исправлении (лично мне на моем 4-дюймовом экране такое поведение очень удобно:), можно выключить только в самом браузере («Мобильный вид» в «Расширенных настройках» у Андроида). Но спасибо за хак с text-align: start — узнал новое, может пригодиться!

К сожалению “text-align: start;” не играет никакого значения в моем случае, текст лишь смещается как при “text-align: left;” причем эта проблема пока ничем не решается, пробовал на разных сайтах, например на этом я тренируюсь и экспериментирую сейчас http://i-turist.com/ тут в опере текст на мобильниках не растягивается во весь экран в первом блоке там где “Компания «Я турист» предлагает интересный отдых ….” , а на этом сайте http://s808.ru/ в опере блоки с описанием не растягиваются, в сафари они изначально растянуты, но стоит сделать масштабирование и увеличить для просмотра изображение как текст сразу съезжает и заполняет блок лишь на 60%.

Не совсем правильно работает в firefox на android,косяк есть,не масштабируется при загрузке,репиты обрезаются из-за этого

Источник