我如何实现缩放功能，就像浏览器的CTRL +

How can I implement a zoom function like the browser's CTRL +

本文关键字：浏览器 CTRL 功能 缩放 何实现 实现      更新时间：2023-09-26

我想要一个按钮放大(增加字体大小是主要目标，但图像和表格等也是需要的)

有一个zoom css3属性可以做到这一点，最新的webkit浏览器(chrome, safari)支持它。

edit:显然IE6在某种程度上支持它，查看下面的注释

在你的body或container上设置缩放CSS属性。可以像使用jQuery的$('body').css('zoom', '200%');一样简单。

查看http://jsfiddle.net/Ks6Yn/1/查看示例

如果可用空间较小，下面的代码将页面缩放到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 变焦
  • IE 8 - 9 -ms-zoom
  • IE 10 - 11 transform &ie

  • Edge 12+ transform & @supports

    • 歌剧

  • 11.5 - 12.0 -o-transform

  • Opera 12.1 transform

  • Firefox 3.5 - 15 -moz-transform

  • Firefox 16+ transform

  • Firefox 22+ transform(有@supports，但没有zoom)

  • Safari 4 - 8 缩放

  • Safari 9+ transform &@supports(同时出现)

  • Chrome 4 - 27 缩放

  • Chrome 28 - 35 缩放(有@supports，但还没有transform)
  • Chrome 36+ transform & @supports

如果我添加-webkit-transform，它开始工作在Safari 3.1 - 3.2，但会刹车很多其他。

实际上，对于现代浏览器，结果是使用transform而忽略zoom。所有现代浏览器(Edge, Firefox, Safari, Chrome)都已经有transform &@支持并符合标准，因此代码不会在将来被破坏。

测试代码:

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

浏览器支持的详细信息:

  • = http://caniuse.com/壮举css-zoom
  • http://caniuse.com/#feat=css-featurequeries(关于@supports)
  • = http://caniuse.com/壮举transforms2d

关于ruSO的答案翻译

一个工作概念是使用JavaScript/jQuery在click eg上加载覆盖CSS样式。

方法1

你需要设置一个变量来存储你的缩放量。

当您应用放大或缩小时，请相应地更改此变量，并更改页面上每个元素的大小，显示为块的元素的宽度和高度以及字体大小。

方法2

有不同的样式表，在缩放值改变的时候加载需要的样式。

方法3

只更改相对于元素缩放级别的类，并为每个缩放类设置一个CSS规则。

不管怎样，我看你做的事不对。

相关文章：