Question

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

Answer 1

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

编辑：显然甚至IE6都以某种方式支持它，请查看下面的评论

在您的身体或容器上设置缩放css属性应该是技巧。可以像使用jQuery $('body').css('zoom', '200%');一样简单。

检查http://jsfiddle.net/Ks6Yn/1/以获取示例

Answer 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 zoom
IE 8 - 9 -ms-zoom
IE 10 - 11 transform ＆amp; 即
Edge 12+ transform ＆amp; @supports
Opera 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 zoom
Safari 9+ transform ＆amp; @supports （同时出现）
Chrome 4 - 27 zoom
Chrome 28 - 35 zoom （已@supports，但尚未transform）
Chrome 36+ 转换＆amp; @supports

如果我添加-webkit-transform，它会在Safari 3.1 - 3.2中开始工作，但会扼杀许多其他人。

实际上，对于现代浏览器，结果是使用transform和反对zoom。所有现代活着的浏览器（Edge，Firefox，Safari，Chrome）已经具有转换＆amp; @supports 并符合标准，因此将来不会破坏代码。

测试代码：

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

^{Translation of my answer on ruSO.}

Answer 3

一个工作概念是使用JavaScript / jQuery在点击时加载覆盖CSS样式。一种大小增加的样式，以覆盖基础。

Answer 4

方法1

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

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

方法2

使用不同的样式表，在缩放值更改时加载所需的样式表。

方法3

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

无论如何，你想要做的事情对我来说是错误的。

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

4 个答案: