Это функция браузера, которая не описана в стандартах. Браузеры вольны реализовывать масштабирование так, как захочется левой пятке архитектора браузера, а также учитывать предпочтения юзера в настройках.
Так как "уникальные" для браузеров фичи признаны Вселенским Злом™, то из жабоскрипта масштабирование недоступно.
Масштабирование может быть реализовано самим сайтом с помощью возможностей 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>