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

IT技术 javascript css html
2021-01-12 20:15:44

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

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

4个回答

我个人认为这是一个坏主意;要么设计您的网站,使其易于扩展(使用适当的 CSS/HTML 技术并不难)。通常,您不应该为人们做出用户体验决策。

但这是可能的。

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

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

请注意,此答案的先前版本用于transform支持更多浏览器。然而,这个缩短的代码似乎适用于当前版本的 Chrome、FF、Safari 和 IE(以及支持zoom很长时间的 IE 的早期版本)。

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

试试这个:

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

<body onload="zoom()">
<h6>content</h6>
</body>
嗨 Iqbal 尝试使用 css body { zoom: 300%; }
2021-03-19 20:15:44
css zoom 在 Chrome、Internet Explorer 中工作,但在 FireFox 中无效
2021-03-23 20:15:44
@DanishIqbal 这个答案-moz-transform在 FireFox 中使用:stackoverflow.com/a/12603229/694469
2021-04-02 20:15:44
非常感谢您的代码在 chrome 中完美运行让我检查其他浏览器
2021-04-08 20:15:44
它不工作 Firefox,在 Internet Explorer 中它需要允许脚本任何建议
2021-04-11 20:15:44

你可以试试 CSSzoom规则。我从来没有真正尝试过,但理论上设置如下的 css 规则可能会做你想要的:

body { zoom: 2; }

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

@jaremysawesome 谢谢你,它在 Chrome、Internet Explorer 中工作,但在 Firefox 中没有任何建议
2021-03-26 20:15:44
@DanishIqbal 这适用于 FF:stackoverflow.com/a/12603229/694469 它使用-moz-transform: scale(2).
2021-04-07 20:15:44
“-moz-transform zoom”与“zoom”不同。第一个打破了我复杂的网站布局,其中包含固定和绝对定位的元素。word-party.com
2021-04-09 20:15:44

我有 PWA,它有一个简约的设计,有很多空白,首先是为手机设计的(所以最初我没有考虑大屏幕)。

因此,当您在非常大的屏幕(电视或大显示器)上打开它时,它看起来非常难看(因为那时空白太多)。作为用户,我每次都需要放大它。我的网络应用程序在大屏幕上稍微调高一点时,在电视上的沙发上更美观,也更易于使用。

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

底线如果你想用 css 缩放网站,你有三个选择:

  • (推荐,对于现有页面更难)在开发页面时使用emrem单位。这将允许更改页面的“缩放”就像更改正文的字体大小一样容易。

  • (对于现有页面更容易)使用“transform:scale”进行跨浏览器体验,但它可能不会按您预期的那样工作。

  • (不推荐,对现有页面很容易)尽管它不是标准属性,但仍要使用 CSS“缩放”属性。牺牲了 Firefox。此外,使用绝对定位的 flexbox 会有一些小的意外行为。