Question

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

这是我的web link最近我得到了增加宽度的任务，就像Firefox我们按Ctrl +并且浏览器缩放级别增加有任何方法在页面上的所有浏览器中自动执行此操作负荷。

Answer 1

我个人认为这是一个坏主意;设计您的网站，以便它可以轻松扩展（不是很难用适当的CSS / HTML技术）或只是允许用户做他们想要的（可能他们已经他们的浏览器缩放或他们使用低分辨率）。通常，您不应该为人们制定UX决策。

但这是可能的。

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

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

Answer 2

试试这个：

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

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

Answer 3

您可以尝试使用CSS zoom规则。我从来没有真正尝试过，但理论上设置如下的css规则可能会做你想要的：

body { zoom: 2; }

注意：这实际上并没有修改浏览器的缩放级别。它只会使页面上的所有内容变得更大：）

Answer 4

这是对像

这样心胸狭窄的帖子的回答

我个人认为这是一个坏主意;

或

为什么不把它设计成更大的

e.t.c

我有PWA，它有一个简约的设计，有很多空白，一开始就用于手机（所以最初我没有想过大屏幕）。它不仅仅是无聊的网站上的文章。这个UI相当复杂。

因此，当你在一个非常大的屏幕（电视或大型显示器）上打开它时，它看起来真的很难看（因为那时它的空白太多了）。作为一个用户，我每次都需要放大它。这是非常愚蠢的。我的webapp更美观，更容易在电视上的沙发上使用，当它在大屏幕上稍微松弛时。

所以我正在做什么，在@media中，如果显示太宽，我会更改缩放属性。 -moz-transform：scale与缩放完全不同的问题。

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

（推荐，现有页面更难）在开发页面时使用 em 和 rem 单位。这将允许更改＆＃34;缩放＆＃34;页面的改变就像更改正文上的字体大小一样简单。
（现有页面更容易）使用＆＃34;转换：scale＆＃34;对于跨浏览器体验，但它可能不像您期望的那样有效。
（不推荐，现有页面很容易）使用CSS＆＃34;缩放＆＃34;尽管它不是一个标准的财产。牺牲火狐。此外，对绝对定位的Flexbox有一些轻微的意外行为。

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

4 个答案: