Как я могу реализовать функцию масштабирования, как браузер CTRL +

Question

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

Answer 1

Существует свойство zoom css3 , которое делает именно это, последние браузеры WebKit (Chrome, Safari) поддерживают его.

edit : очевиднодаже IE6 каким-то образом поддерживает это, проверьте комментарии ниже

, установив свойство zoom css на вашем теле или контейнере в соответствии с трюком.Может быть так же просто, как $('body').css('zoom', '200%'); с jQuery.

Проверьте http://jsfiddle.net/Ks6Yn/1/ для примера

Answer 2

Следующий код увеличивает масштаб страницы до 1024px = 100%, если доступное пространство меньше.Если места достаточно, страница отображается как есть.

https://jsfiddle.net/xgqw5bjo/3/

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

~function () {
  var $window = $(window), $body = $("body");
  var ie = document.documentMode;
  
  function updateSizes() {
    var width = $window.width(), scale = Math.min(width / 1024, 1);

    var style = $body[0].style;
    
    style.msZoom = ie === 8 || ie === 9 ? scale : 1;
    style.zoom = ie === 10 || ie === 11 ? 1 : scale;
    style.mozTransform = "scale(" + scale + ")";
    style.oTransform = "scale(" + scale + ")";
    style.transform = "scale(" + scale + ")";
  }

  $window.resize(updateSizes);
  updateSizes();
}();

html {
  width: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  transform-origin: top left;
}

@supports (transform: scale(1)) {
  body {
    -ms-zoom: 1 !important;
    zoom: 1 !important;
  }
}

div {
  width: 1024px;
  height: 128px;
  background: url(//i.stack.imgur.com/eMSCb.png) repeat-x;
  background: repeating-linear-gradient(to right, blue, red 256px);
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div></div>

Теоретически это должно работать следующим образом:

• IE 5.5 - 7 zoom
• IE 8 - 9 -ms-zoom
• IE 10 - 11 transform & т.е.

• Edge 12+ transform & @ поддерживает

• Opera 11.5 - 12.0 -o-transform

• Opera 12.1 transform

• Firefox 3.5 - 15 -moz-transform

• Firefox 16+ преобразование

• Firefox 22+ преобразование (имеет @supports, но не zoom)

• Safari 4 - 8 zoom

• Safari 9+ transform & @ support (появилось одновременно)

• Chrome 4 - 27 zoom

• Chrome 28 - 35 zoom (имеет @supports, но еще не transform)
• Chrome 36+ transform & @ поддерживает

Если я добавлю -webkit-transform, он начнет работать в Safari 3.1 - 3.2, но затормозит многие другие.

На самом деле для современныхРезультат работы браузера: transform и игнорирование zoom.Все современные живые браузеры (Edge, Firefox, Safari, Chrome) уже имеют transform & @ поддерживает и соответствуют стандартам, поэтому код не будет нарушен в будущем.

Протестировал код в:

• IE 11
• Edge 15
• Opera 12.18
• Firefox 50
• Safari 5 (Win)
• Safari 10 (Mac)
• Chrome 54, 58

Подробная информация о поддержке браузеров:

• http://caniuse.com/#feat=css-zoom
• http://caniuse.com/#feat=css-featurequeries (около @supports)
• http://caniuse.com/#feat=transforms2d

---

^{Перевод моегоответ на ruSO.}

Answer 3

Подход 1

Вам необходимо установить переменную, в которой будет храниться величина увеличения.

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

Подход 2

Имеет другую таблицу стилей, загружает необходимую в момент изменения значения масштабирования.

Подход 3

Измените только класс относительно уровня масштабирования для элементов и используйте правило CSS для каждого класса масштабирования.

Во всяком случае, то, что вы пытаетесь сделать, выглядит неправильно для меня.

Answer 4

Рабочая концепция заключается в использовании JavaScript / jQuery для загрузки перезаписываемого стиля CSS при нажатии, например.стиль с увеличенными размерами всего, чтобы перезаписать базовый.