如何在页面加载时增加浏览器缩放级别？答案

【问题标题】：How to Increase browser zoom level on page load?如何在页面加载时增加浏览器缩放级别？
【发布时间】：2012-03-15 12:59:09
【问题描述】：

如何在页面加载时增加浏览器缩放级别？

这是我的web link，最近我接到了增加其宽度的任务，就像 Firefox 我们按下 Ctrl + 并且浏览器缩放级别增加一样，有没有办法在页面加载时在所有浏览器中自动执行此操作。

【问题讨论】：

注意：我已经用谷歌搜索了这个，但没有找到这个或解决这个问题的东西
如果您总是希望网站更大，为什么不把它设计得更大呢？
@TimMedora 感谢您的回复，实际上它需要更多时间来增加所有事物的大小，我认为如果我只是增加缩放级别，那么最好在页面中添加代码
作为 Web 开发领域的十年老手，我从没想过我会想要缩放 - 因为它侵犯了用户的控制范围。但是，对于我的 Intranet 应用程序，多个用户将他们的各种分辨率设置为根据他们不同的视力工作。我的站点可以很好地扩展，但在某些情况下，它太大了，与他们访问的其他站点相比，它需要独立地缩减。我可以提供他们可以保存的设置（保留在我们的数据库中），以缩小网站，这样他们就不必每次访问我的应用程序时都反复弄乱他们的放大/文本大小控件。

标签： javascript css html

【解决方案1】：

我个人认为这是一个坏主意；要么设计您的网站，使其易于扩展（使用适当的 CSS/HTML 技术并不难）。通常，您不应该为人们做出 UX 决策。

但这是可能的。

演示：http://jsfiddle.net/q6kebgbh/4/

.zoom {
    zoom: 2;
    -moz-transform: scale(2);
    -moz-transform-origin: 0 0;
}

请注意，此答案的先前版本使用 transform 来支持更多浏览器。但是，这个缩短的代码似乎适用于当前版本的 Chrome、FF、Safari 和 IE（以及以前版本的 IE，它们已经支持 zoom 很长时间了）。

【讨论】：

非常感谢它在 Firefox、Chrome 中运行良好，但在旧 Internet Explorer 中无法运行任何建议我也在下载 ie8
@DanishIqbal - 您需要使用两种不同的方法来支持旧版本的 IE。我更新了我的示例以显示对所有浏览器的支持。
注意：这实际上不是浏览器缩放。使用这种技术，浏览器缩放仍然设置为 100%。
是的，同意@cronoklee。这样做的问题是尺寸将被报告为 100%，而当它在视觉上显示为 200% 时，可能会出现问题。视口仍然是 100%。例如，在显示视频时，一部分位于视口下方，用户无法按下停止按钮。改用浏览器缩放，效果很好。
@Erwinus - 是的，请注意这个答案已有 3.5 年历史，即使在那时我也认为这是一个坏主意。我相信所有现代浏览器现在都支持原生缩放，因此没有充分的理由对整个页面使用这种方法。缩放特定元素仍有其用途（例如，在鼠标悬停时为元素大小设置动画）。

【解决方案2】：

我有 PWA，它采用简约设计，有很多空白，最初是为手机设计的（所以一开始我没有考虑大屏幕）。

因此，当您在非常大的屏幕（电视或大显示器）上打开它时，它看起来真的很难看（因为此时空白太多）。作为一个用户，我每次都需要放大它。我的 web 应用程序在大屏幕上稍微放大一点时，在电视上的沙发上更美观，也更容易使用。

所以在@media 中，如果显示太宽，我会更改缩放属性。问题是 -moz-transform: scale 与 zoom 完全不同。

如果你想用 css 缩放网站，你有三个选择：

（推荐，对现有页面更难）在开发页面时使用 em 和 rem 单位。这将允许更改页面的“缩放”就像更改正文上的字体大小一样简单。
（对于现有页面更容易）使用“transform: scale”获得跨浏览器体验，但它可能无法按您的预期工作。
（不推荐，对现有页面很容易）使用 CSS“缩放”属性，尽管它不是标准属性。牺牲火狐。此外，绝对定位的弹性盒有一些小的意外行为。

【讨论】：

【解决方案3】：

试试这个：

<script type="text/javascript">
        function zoom() {
            document.body.style.zoom = "300%" 
        }
</script>

<body onload="zoom()">
<h6>content</h6>
</body>

【讨论】：

非常感谢您的代码在 chrome 中运行良好，让我检查一下其他浏览器
它不能在 Firefox 中运行，并且在 Internet Explorer 中它需要允许脚本任何建议
嗨 Iqbal 尝试使用 css body { zoom: 300%; }
css zoom 其在 Chrome、Internet Explorer 中工作，但在 FireFox 中不工作
@DanishIqbal 这个答案在 FireFox 中使用 -moz-transform 代替：stackoverflow.com/a/12603229/694469

【解决方案4】：

您可以尝试 CSS zoom 规则。我从未真正尝试过，但理论上设置如下的 CSS 规则可能会满足您的要求：

body { zoom: 2; }

注意：这实际上不会修改浏览器的缩放级别。它只会使页面上的所有内容都更大:)

【讨论】：

@jaremysawesome 非常感谢它在 Chrome、Internet Explorer 中的工作，但在 Firefox 中没有任何建议
@DanishIqbal 这适用于 FF：stackoverflow.com/a/12603229/694469 它使用 -moz-transform: scale(2)。
'-moz-transform zoom' 与'zoom' 不同。第一个打破了我复杂的网站布局，其中包含固定和绝对定位的元素。word-party.com