3

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

Мне требуется уменьшить масштаб, но ширину страницы сохранить (уменьшить шрифт, например).

3 ответа 3

5

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

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

Масштабирование может быть реализовано самим сайтом с помощью возможностей 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 <= 9)
      zoomLevel = 'small';
    else 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 {
  font-size: 1.5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  <button id="plus">+</button>
  <button id="minus">−</button>
</p>
<div id="root" class="zoom-normal">
  <h1>Lorem Ipsum</h1>
  <p>
    <img class="scalable" src="http://i.imgur.com/n9t1rYZ.gif" style="float: right; width: 100px"/>
    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.
  </p>
</div>

2
  • 1
    Приведите, пожалуйста, пример реализации, в которой сохраняется ширина страницы в соответствии с заданным масштабом. Например, если требуется 75% от оригинального масштаба с сохранением ширины страницы.
    – user179410
    11 июн 2015 в 13:59
  • 1
    @ultrabatya Добавил пример. С текстом получилось чисто, с картинками как-то костыльно (с полным проходом). Если найдёте способ нормально масштабировать картинки, то можно будет избежать полного прохода.
    – Kyubey
    11 июн 2015 в 15:08
2

JS

a = document.getElementsByTagName('html');
a[0].style.transform = "scale(2,2)";
0

Можно перевести все стили из px в rem и менять масштаб всей страницы, меняя размер базового шрифта. https://px2rem.ru/ тут, можно преобразовать весь файл со стилями из px в rem. Также там есть формула для изменения размеров в зависимости от ширины экрана при помощи медиазапроса.

1
  • Ссылка не открывается 22 мар 2022 в 6:43

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.