имитировать масштабирование браузера с помощью JavaScript

Как можно уменьшить масштаб всего документа с помощью JavaScript?

Моя цель - имитировать встроенный в браузер зум и масштабировать весь документ до 90%.

Я пытался использовать

<code>document.body.zoom
</code>

Это работает только сexplorer и страница становится грязной (много элементов перемещается).

Есть ли способ сделать это?

Ответы на вопрос(3)

scale () и JavaScript / jQuery:

jQuery(document).ready(function($) {
    // Set initial zoom level
    var zoom_level = 100;

    // Click events
    $('#zoom_in').click(function() {
        zoom_page(10, $(this))
    });
    $('#zoom_out').click(function() {
        zoom_page(-10, $(this))
    });
    $('#zoom_reset').click(function() {
        zoom_page(0, $(this))
    });

    // Zoom function
    function zoom_page(step, trigger) {
        // Zoom just to steps in or out
        if (zoom_level >= 120 && step > 0 || zoom_level <= 80 && step < 0) return;

        // Set / reset zoom
        if (step == 0) zoom_level = 100;
        else zoom_level = zoom_level + step;

        // Set page zoom via CSS
        $('body').css({
            transform: 'scale(' + (zoom_level / 100) + ')', // set zoom
            transformOrigin: '50% 0' // set transform scale base
        });

        // Adjust page to zoom width
        if (zoom_level > 100) $('body').css({
            width: (zoom_level * 1.2) + '%'
        });
        else $('body').css({
            width: '100%'
        });

        // Activate / deaktivate trigger (use CSS to make them look different)
        if (zoom_level >= 120 || zoom_level <= 80) trigger.addClass('disabled');
        else trigger.parents('ul').find('.disabled').removeClass('disabled');
        if (zoom_level != 100) $('#zoom_reset').removeClass('disabled');
        else $('#zoom_reset').addClass('disabled');
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Trigger -->
<ul id="zoom_triggers">
    <li><a id="zoom_in">zoom in</a></li>
    <li><a id="zoom_out">zoom out</a></li>
    <li><a id="zoom_reset">reset zoom</a></li>
</ul>

 b3verelabs04 февр. 2016 г., 14:40
Это просто здорово, я хочу, чтобы страница увеличивалась и уменьшалась, а затем обновлялась, чтобы перейти на полный экран, как это происходит при ручном масштабировании с помощью браузера. В этом случае для меня это просто увеличивает и уменьшает размер тела. Я хочу, чтобы страница оставалась того же размера, но просто увеличивала или уменьшала размер элементов, содержащихся на ней.

Вот и ты:

USE:

document.body.style.zoom=1.0;this.blur();

1.0 означает 100%

150% будет 1,5 1000% будет 10,0

this.blur () означает, что курсор, возможно, вы выбрали поле ввода, теряет фокус каждого выбранного элемента.

или

Вы можете использовать элемент css3 Зум (Источни)

Firefox не позволяет масштабирование с помощью браузера, потому что вы не можете получить доступ к свойствам пользователя через javascript или sth.

Так что вы можете просто использовать некоторые стили CSS, которые позволяют увеличить (CSS3: увеличить, как упомянуто выше) или увеличить размер текста! Что вы можете сделать, например, с помощью другого файла CSS. Но здесь у вас есть проблема «скачка», потому что стилизованные элементы css (плавающие и т. Д.) Должны «взаимодействовать» по-разному по своим атрибутам.

Зум, который я разместил выше, хорошо работает в Chrome и IE8 + (FF не поддерживается, как упоминалось)

-- Дополнительная информация

Во - пример того, как точно увеличить масштаб с помощью опции увеличения. Пример приложения можно найтиВо

Опция зума обычно обрабатывает зум как ваш браузер!

Но это все еще вещи, которые не поддерживаются Firefox или, возможно, Safari & Opera? В хроме и IE это работает!

Еще одно решение: поместите ваши основные размеры в «em», а затем обойдите, установив такие размеры, как 100%, 110% (по всему CSS). Таким образом, вы можете иметь разные CSS-файлы, и «просто» нужно заменить атрибуты%!

Но я не думаю, что могут быть другие решения! :

 Lix05 мая 2012 г., 19:33
Хотя это может теоретически ответить на вопрос, это было бы предпочтительнее, чтобы включить основные части ответа здесь, и предоставить ссылку для справки.
 lior r06 мая 2012 г., 22:49
спасибо, хотя ваше решение работает, оно не имитирует точное действие, вызванное Ctrl + или Ctrl-. функция масштабирования css испортила часть структуры страницы (особенно при работе с margin: auto), в то время как ctrl + - не ... есть ли другой способ сделать это?
 creativeby07 мая 2012 г., 01:55
Отредактировал мой пост! Надеюсь я понял что ты хочешь? :) (Тем не менее у вас есть проблема, что Firefox / Safari? / Opera? Не поддерживает масштабирование!)

работает с Firefox, Safari, Chrome и IE9 +:

window.onload = function() {
  var currFFZoom = 1;
  var currIEZoom = 100;

  $('#In').on('click', function() {
    if (navigator.userAgent.indexOf('Firefox') != -1 && parseFloat(navigator.userAgent.substring(navigator.userAgent.indexOf('Firefox') + 8)) >= 3.6) { //Firefox
      var step = 0.02;
      currFFZoom += step;
      $('body').css('MozTransform', 'scale(' + currFFZoom + ')');
    } else {
      var step = 2;
      currIEZoom += step;
      $('body').css('zoom', ' ' + currIEZoom + '%');
    }
  });

  $('#Out').on('click', function() {
    if (navigator.userAgent.indexOf('Firefox') != -1 && parseFloat(navigator.userAgent.substring(navigator.userAgent.indexOf('Firefox') + 8)) >= 3.6) { //Firefox
      var step = 0.02;
      currFFZoom -= step;
      $('body').css('MozTransform', 'scale(' + currFFZoom + ')');

    } else {
      var step = 2;
      currIEZoom -= step;
      $('body').css('zoom', ' ' + currIEZoom + '%');
    }
  });
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="button" id="Out" value="Zoom Out"/>
<input type="button" id="In" value="Zoom In"/>

Ваш ответ на вопрос