使用JavaScript模拟浏览器缩放

如何使用JavaScript缩小整个文档

我的目标是模仿内置的浏览器缩放，并将整个文档缩放到90%

我试过使用

document.body.zoom

这只适用于

explorer

，页面变得凌乱（很多元素在移动）

有办法做到这一点吗？

使用：

1.0表示100%

150%为1.5% 1000%等于10.0%

这个.blur（）表示游标（可能是您选择的输入字段）会松开每个选择项的焦点

或：

您可以使用css3元素（）

使用浏览器缩放，因为您无法通过javascript或其他方式访问用户属性

因此，您可以使用一些CSS样式来缩放（CSS3:zoom，如上所述）或增加文本大小！例如，您可以通过包含不同的CSS文件来实现。但是这里有一个“跳跃”的问题，因为样式化的css元素（浮动的等等）必须“交互”不同的属性

我上面发布的缩放功能在Chrome和IE8+中运行良好（如前所述不支持FF）

-- 其他信息：

是一个关于如何使用“缩放”选项精确缩放的示例。 可以找到示例应用程序

缩放选项通常会像浏览器一样处理缩放

但这仍然是所有的东西，Firefox或Safari&Opera不支持这些东西？在chrome和IE中工作

另一个解决方案是：将您的主要尺寸放在“em”中，然后通过将尺寸设置为100%、110%（在css中）。所以你可以有不同的CSS文件，“只”需要替换%属性

---

但我不认为还有其他的解决办法！：（

我用jquery完成了这项工作，使用Firefox、Safari、Chrome和IE9+：

window.onload=function（）{
var currFFZoom=1；
var currIEZoom=100；
$（'#In'）。在（'单击'，函数（）上）{
if（navigator.userAgent.indexOf（'Firefox'）！=-1&&parseFloat（navigator.userAgent.substring（navigator.userAgent.indexOf（'Firefox'）+8））>=3.6{//Firefox
var阶跃=0.02；
currFFZoom+=步长；
$（'body'）.css（'MozTransform'，'scale（'+currFFZoom+'））；
}否则{
var阶跃=2；
currIEZoom+=步长；
$（'body'）.css（'zoom'，'+currIEZoom+'%'）；
}
});
$（'Out'）。在（'click'，function（）上{
if（navigator.userAgent.indexOf（'Firefox'）！=-1&&parseFloat（navigator.userAgent.substring（navigator.userAgent.indexOf（'Firefox'）+8））>=3.6{//Firefox
var阶跃=0.02；
currFFZoom-=步长；
$（'body'）.css（'MozTransform'，'scale（'+currFFZoom+'））；
}否则{
var阶跃=2；
currIEZoom-=步进；
$（'body'）.css（'zoom'，'+currIEZoom+'%'）；
}
});
}；

---

以下是我使用CSS transform:scale（）和JavaScript/jQuery的解决方案：

jQuery（文档）.ready（函数（$）{
//设置初始缩放级别
var zoom_level=100；
//点击事件
$（“#放大”）。单击（函数（）{
缩放页面（10，$（此））
});
$（“#缩小”）。单击（函数（）{
缩放页面（-10，$（此））
});
$（“#缩放_重置”）。单击（函数（）{
缩放页面（0，$（此））
});
//缩放功能
功能缩放页面（步进、触发器）{
//仅放大或缩小步骤
如果（缩放级别>=120&&step>0 | |缩放级别100）$（'body'）.css({
宽度：（缩放级别*1.2）+'%'
});
else$（'body'）.css({
宽度：“100%”
});
//激活/取消激活触发器（使用CSS使其看起来不同）
如果（缩放水平>=120 | |缩放水平尝试使用
transform:scale（）

.className{
变换：比例（0.9）
}

您可以使用Javascript更改缩放量

让scaleAmount=1-0.1
document.body.style.transform=`scale（${scaleAmount}）`

scale（）

让scaleAmount=1-0.1
document.body.style.transform=`scale（${scaleAmount}）`
document.body.style.width=`${100*（1/scaleAmount）}%`
document.body.style['transform-origin']=`0`

如果使用React之类的UI框架，可以将状态中存在的scaleAmount传递给内联CSS

<header className="App-header" style ={{
    transform: `scale(${scaleState})`,
    transformOrigin: '0 0',
    width: `${100 * (1 / scaleState)}%`
}}>



虽然这在理论上可以回答问题，但在此处包含答案的基本部分，并提供链接供参考。谢谢，虽然您的解决方案确实有效，但它不会模仿ctrl+或ctrl-所导致的确切动作。css缩放功能会弄乱一些页面结构（特别是在处理边距：自动时）虽然ctrl+-不能…但是还有其他方法吗？编辑了我的帖子！我希望我理解了你想要什么？：）（仍然存在Firefox/Safari？/Opera？不支持缩放的问题！）这很好，唯一的一点是我希望页面放大和缩小，然后刷新以占据整个屏幕，就像您使用浏览器手动缩放时一样。在这种情况下，我只需将主体放大和缩小到相应的大小。我希望页面保持相同的大小，但只需增加或减少其中包含的项目的大小。
<header className="App-header" style ={{
    transform: `scale(${scaleState})`,
    transformOrigin: '0 0',
    width: `${100 * (1 / scaleState)}%`
}}>