如何实现像浏览器的 CTRL + 这样的缩放功能答案

【问题标题】：How can I implement a zoom function like the browser's CTRL +如何实现像浏览器的 CTRL + 这样的缩放功能
【发布时间】：2017-05-31 15:41:17
【问题描述】：

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

【问题讨论】：

您是否要在自己的网站上实现这一目标？还是您正在访问的？
在其他问题上见my answer，它可能对你也有用
为什么需要这样做？您的用户肯定可以只使用他们的浏览器吗？
您的用户浏览器已经具有缩放功能，正如您所确定的。无需重新发明。
这是标记为 IE6 是因为您真的需要 IE6 解决方案吗？

标签： javascript css internet-explorer-6

【解决方案1】：

zoom css3 property 正是这样做的，最新的 webkit 浏览器（chrome、safari）支持它。

编辑：显然即使 IE6 在某种程度上也支持它，请检查下面的 cmets

在你的 body 或容器上设置 zoom css 属性应该可以解决问题。可以像使用 jQuery 的 $('body').css('zoom', '200%'); 一样简单。

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

【讨论】：

我认为IE6不支持css3
@user521180：如果您明确需要 IE6 支持，恐怕您在此功能上不走运，除非您可以调整一些相对字体大小，否则会更难，而且可能无法按预期工作.
奇怪的是，在这种情况下，IE 确实支持缩放......这是他们多年前的黑客行为之一。但它的行为很奇怪......缩放包括表单控件边框在内的所有内容......
@scunliffe：缩放不应该是这样工作的吗，放大所有组件，包括表单控件及其边框？缩放缩放 imo :)
哇，这真是个奇迹。它会尝试让它工作并回复你谢谢

【解决方案2】：

如果可用空间较小，以下代码会将页面缩放到 1024px = 100%。如果有足够的空间，页面将按原样显示。

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

请注意，setting style via 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
Opera 11.5 - 12.0 -o-transform
Opera 12.1 转换
Firefox 3.5 - 15 -moz-transform
Firefox 16+ 转换
Firefox 22+ transform（有@supports，但没有zoom）
Safari 4 - 8 缩放
Safari 9+ transform & @supports（同时出现）
Chrome 4 - 27 缩放
Chrome 28 - 35 zoom（有@supports，但还没有transform）
Chrome 36+ transform & @supports

如果我添加-webkit-transform，它将在 Safari 3.1 - 3.2 中开始工作，但会阻止很多其他版本。

实际上，现代浏览器的结果是使用transform 并忽略zoom。所有现代的活动浏览器（Edge、Firefox、Safari、Chrome）都已经具有 transform 和 @supports 并符合标准，因此将来代码不会被破坏。

测试了以下代码：

IE 11
边缘 15
Opera 12.18
火狐50
Safari 5（赢）
Safari 10 (Mac)
铬 54、58

浏览器支持详情：

http://caniuse.com/#feat=css-zoom
http://caniuse.com/#feat=css-featurequeries（约@supports）
http://caniuse.com/#feat=transforms2d

^{Translation of my answer on ruSO.}

【讨论】：

赞成。不是因为我使用它，而是因为这是一个可靠的答案。完整的解释、代码示例、链接和浏览器支持信息。不错！

【解决方案3】：

一个可行的概念是使用 JavaScript/jQuery 在点击时加载覆盖 CSS 样式，例如。一种增加所有内容大小以覆盖基本样式的样式。

【讨论】：

【解决方案4】：

方法 1

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

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

方法 2

有不同的样式表，在缩放值改变的那一刻加载需要的样式表。

方法 3

仅将与缩放级别相关的类更改为元素，并为每个缩放类设置一个 CSS 规则。

无论如何，我认为你正在尝试做的事情是错误的。

【讨论】：