Как сделать масштабирование в html

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

Что нужно прописать CSS для того, чтобы уменьшить масштаб HTML страницы? В браузере можно сделать так: нажать последовательно CTRL и — . После этого масштаб страницы уменьшится с сохранением ширины документа. Это важный момент, т. к. решения, которые я находил в интернете уменьшали масштаб и в том числе сужали страницу по ширине. Мне требуется уменьшить масштаб, но ширину страницы сохранить (уменьшить шрифт, например).

Отслеживать
32k 19 19 золотых знаков 79 79 серебряных знаков 105 105 бронзовых знаков
задан 11 июн 2015 в 13:24
user179410 user179410

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

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

Так как «уникальные» для браузеров фичи признаны Вселенским Злом™, то из жабоскрипта масштабирование недоступно.

Масштабирование может быть реализовано самим сайтом с помощью возможностей CSS.

Правильный способ

Использовать относительные размеры для шрифтов ( % , em и др.), в корне страницы менять размер базового шрифта.

Для остальных элементов можно добавить дополнительные стили и опять же в зависимости от класса корня менять размер. Для картинок будет разумно округлять масштаб до «круглых» чисел вроде 50%, 33% и т. п.

Жёсткий способ

Использовать стандартное свойство CSS transform . Можно добавить в корень документа стиль transform: scale(N%) , тогда отмасштабируется вся страница. Учтите, что за качество и производительность никто не отвечает.

Чтобы сохранить ширину страницы, её можно менять в соответствии с масштабом (помножить на обратное число, собственно).

Костыльный способ

Ипользовать нестандартное свойство CSS zoom . Опять же в корень можно добавить zoom: N% . Поддержка не гарантируется, работает не во всех браузерах.

Пример правильного способа:

$(function() < var fontSize = 12; var imgScales = < small: 0.25, normal: 0.50, large: 1.00 >function setFontSize(fontSize) < var zoomLevel = 'normal'; if (fontSize = 15) zoomLevel = 'large'; var imgScale = imgScales[zoomLevel]; $('#root').css('font-size', fontSize + 'pt'); $('#root').removeClass('zoom-small zoom-normal zoom-large'); $('#root').addClass('zoom-' + zoomLevel); $('img.scalable').each(function() < $(this).css('width', this.naturalWidth * imgScale); $(this).css('height', this.naturalHeight * imgScale); >); > $('#plus').on('click', function() < setFontSize(++fontSize); >); $('#minus').on('click', function() < setFontSize(--fontSize); >); >);

#root < font: 12pt sans-serif; width: 500px; background: lightskyblue; >p < font-size: 1em; >h1

 
+ − 
 
Lorem Ipsum
 
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 

Функция scale()

С помощью функции scale() свойства transform можно увеличивать и уменьшать объекты на веб-странице. Принцип работы заключается в масштабировании элемента по горизонтали и вертикали с указанием коэффициента масштабирования. Пример:

transform: scale(3); /* пропорциональное увеличение элемента в 3 раза */ transform: scale(0.5); /* пропорциональное уменьшение элемента наполовину */

В начале темы, когда мы рассказывали о свойстве transform в целом, упоминалось, что трансформированные элементы могут накладываться на соседние. Наиболее наглядно показать это позволяет именно функция scale().

Параметры функции

В качестве параметров функция scale() принимает целые и дробные числа. Для пропорционального масштабирования достаточно указать нужное число в скобках. Так, число выше единицы увеличит масштаб, а число в диапазоне от 0.01 до 0.99 уменьшит его. Число 1 никак не масштабирует элемент, а число 0 приведет к визуальному исчезновению элемента.

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

transform: scale(4, 1.5);

Отдельные функции для каждой оси

В CSS также имеется набор функций для управления масштабированием каждой из трех осей по отдельности — X, Y и Z. Называются они соответственно:

• scaleX() — масштабирование по горизонтали X;
• scaleY() — масштабирование по вертикали Y;
• scaleZ() — масштабирование по оси Z.

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

Отрицательные числа в параметрах

Вы можете добиться эффекта «отражения в зеркале», если примените отрицательное число в качестве коэффициента масштабирования. При этом флип произойдет даже в том случае, если вы используете -1 (просто не будет эффекта масштабирования):

transform: scale(1, -1); /* флип по оси X */ transform: scale(-1, 1); /* флип по оси Y */ transform: scale(-1); /* флип по осям X и Y */

При использовании свойства transform на практике не забывайте про вендорные префиксы для обеспечения наилучшей кроссбраузерности.

Далее в учебнике: функция наклона skew().

zoom

Изменяет масштаб объекта согласно заданному значению.

Синтаксис

Значения

значение Число с плавающей запятой, значение 1.0 соответствует normal . Значения больше 1.0 увеличивают масштаб объекта, значения меньше 1.0 уменьшают масштаб. проценты Целое число, заданное в процентах. Указывает изменение масштаба относительно 100%, которое соответствует значению normal . normal Объект имеет исходный масштаб.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

     .zoom:hover 
  

В данном примере масштаб рисунка увеличивается в три раза при наведении на него курсора мыши.

Объектная модель

[window.]document.getElementById(» elementID «).style.zoom

Браузеры

Браузер Internet Explorer с версии 8.0 понимает также свойство — ms-zoom .

Можно ли изменить масштаб сайта при помощи html или css?

Можно ли сделать так,чтобы во всех браузерах автоматически для конкретного сайта выставлялся масштаб не 100% а 75%, например?

• Вопрос задан более трёх лет назад
• 33347 просмотров

Комментировать
Решения вопроса 0
Ответы на вопрос 3

Алина Брэнн @alina_ivanovna

Вопрос был задан давно, но вдруг кому-то пригодится,
body < zoom: 75%>отлично с этим справляется, прям как надо. Но надо быть осторожным с большими экранами, лучше задавать через «@media»

Ответ написан более трёх лет назад
Нравится 4 1 комментарий
zoom не работает в firefox ='( https://bugzilla.mozilla.org/show_bug.cgi?id=390936

Инженер и вэб-дизайнер, рисую.

Вы можете использовать css3 transform scale htmlbook.ru/css/transform
Но если речь идет об изменении масштаба пользователем посредством настройки браузера — то нет, Вы не сможете это сделать. Более того, за подобные штуки в мобильных версиях сайта через

надо руки отрывать.
Нельзя навязывать такие вещи пользователю, масштаб не просто так придуман.
Ответ написан более трёх лет назад
Нравится 2 1 комментарий

@korobochkin ага
@ninalykova куда Вы пропали? Как-то отреагируйте на ответ. Поясните подробнее, что хотите, если мой ответ Вас не устраивает. Я Вас не так понял?

Павел Гоголинский @gogolinsky

Ну тут два варианта
1) Если вы говорите про свой собственный сайт, то установите в css для тега body width:75%
2) Если вы говорите не про свой сайт (например кинопоиск), то придется создавать внешний css со строкой
body
И в настройках браузера его указать как пользовательский стиль