Javascript 如何实现浏览器之类的缩放功能'；s CTRL+；

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

一个工作概念是使用JavaScript/jQuery在单击时加载一个覆盖CSS样式，例如，一个所有内容大小都增加的样式来覆盖基本样式。

方法1

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

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

方法2

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

方法3

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

无论如何，我觉得你所做的似乎是错的。

最新的webkit浏览器（chrome、safari）支持它

编辑：显然，即使IE6在某些方面也支持它，请查看下面的评论

在主体或容器上设置zoom css属性应该是一个好方法。可以像

$（'body'）.css（'zoom'，'200%'）一样简单与jQuery

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


注意，使用的版本不能像jQuery处理前缀一样工作，但是在这个解决方案中，我需要控制它们中的每一个


~函数（）{
变量$window=$（window），$body=$（“body”）；
var ie=document.documentMode；
函数updateSizes（）{
var width=$window.width（），scale=Math.min（width/1024，1）；
var style=$body[0]。样式；
style.msZoom=ie==8 | | ie==9？比例：1；
style.zoom=ie==10 | | ie==11？1：比例；
style.mozTransform=“scale”（+scale+”）；
style.oTransform=“比例（“+scale+”）；
style.transform=“缩放”（+scale+”）；
}
$window.resize（更新大小）；
updateSizes（）；
}();
html{
宽度：100%；
溢出：隐藏；
}
身体{
保证金：0；
变换原点：左上角；
}
@支撑（变换：比例（1））{
身体{
-中景：1！重要；
缩放：1！重要；
}
}
div{
宽度：1024px；
高度：128px；
背景：url（//i.stack.imgur.com/eMSCb.png）repeat-x；
背景：重复线性渐变（向右，蓝色，红色256px）；
}

您是否试图在自己的网站上实现这一点？或者你正在拜访的人？看看其他一些问题，它可能对你有用，为什么你需要这样做？您的用户当然可以只使用他们的浏览器？正如您所确定的，您的用户浏览器已经有了缩放功能。没有必要重新发明它。这是不是因为你真的需要一个IE6解决方案而标记了IE6？我认为IE6不支持css3@user521180：如果您明确需要IE6支持，恐怕您在这个功能上走运，除非您可以摆弄一些相对FontSize，否则会更难，而且可能无法如期工作。奇怪的是，在这种情况下，IE支持缩放。。。这是他们多年前的一次黑客攻击。但它的行为很奇怪。。。缩放包括表单控件边框在内的所有内容…@scunlife:放大所有组件（包括表单控件及其边框）不就是这样吗？？缩放比例：）哇，真是个奇迹。它会努力让它工作起来，然后给你回复。不是因为我用了它，而是因为这是一个可靠的答案。包括解释、代码示例、链接和浏览器支持信息。美好的