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

470

15 декабря 2016, 16:33

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

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

Answer 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; 
}

<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>