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

Question

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

Answer 1

有这个缩放css3属性 ，最新的webkit浏览器（chrome，safari）支持它。

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

在你的身体或容器上设置缩放css属性应该是诀窍。 可以像$('body').css('zoom', '200%');一样简单$('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 变焦
• IE 8 - 9 毫秒 - 缩放
• IE 10 - 11 转换 ＆ 即

• Edge 12+ 转换和@supports

• Opera 11.5 - 12.0 -o-transform

• Opera 12.1 转换

• Firefox 3.5 - 15 -moz-transform

• Firefox 16+ 转换

• Firefox 22+ 转换 （有@supports ，但没有zoom ）

• Safari 4 - 8 变焦

• Safari 9+ 转换和@supports （同时出现）

• Chrome 4 - 27 变焦

• Chrome 28 - 35 zoom （有@supports ，但尚未transform ）
• Chrome 36+ 转换和@supports

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

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

测试代码：

• IE 11
• 边缘15
• 歌剧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

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

Answer 4

方法1

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

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

方法2

有不同的样式表，在缩放值变化时加载所需的样式表。

方法3

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

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