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

#html #css

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

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

Ответы

Ответ 1

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

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

Масштабирование может быть реализовано самим сайтом с помощью возможностей 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;
}


  
  


  
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.
  



Ответ 2

JS


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


Ответ 3

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