如何在页面加载时增加浏览器缩放级别?
这是我的网页链接,最近我接到了增加宽度的任务,就像我们按下 FirefoxCtrl +
并且浏览器缩放级别增加一样,有没有办法在页面加载时在所有浏览器中自动执行此操作。
如何在页面加载时增加浏览器缩放级别?
这是我的网页链接,最近我接到了增加宽度的任务,就像我们按下 FirefoxCtrl +
并且浏览器缩放级别增加一样,有没有办法在页面加载时在所有浏览器中自动执行此操作。
我个人认为这是一个坏主意;要么设计您的网站,使其易于扩展(使用适当的 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 的早期版本)。
试试这个:
<script type="text/javascript">
function zoom() {
document.body.style.zoom = "300%"
}
</script>
<body onload="zoom()">
<h6>content</h6>
</body>
你可以试试 CSSzoom
规则。我从来没有真正尝试过,但理论上设置如下的 css 规则可能会做你想要的:
body { zoom: 2; }
注意:这实际上不会修改浏览器的缩放级别。它只会使页面上的所有内容都变大:)
我有 PWA,它有一个简约的设计,有很多空白,首先是为手机设计的(所以最初我没有考虑大屏幕)。
因此,当您在非常大的屏幕(电视或大显示器)上打开它时,它看起来非常难看(因为那时空白太多)。作为用户,我每次都需要放大它。我的网络应用程序在大屏幕上稍微调高一点时,在电视上的沙发上更美观,也更易于使用。
所以在@media 中,如果显示太宽,我会更改缩放属性。问题在于 -moz-transform: scale 与缩放完全不同。
底线如果你想用 css 缩放网站,你有三个选择:
(推荐,对于现有页面更难)在开发页面时使用em和rem单位。这将允许更改页面的“缩放”就像更改正文的字体大小一样容易。
(对于现有页面更容易)使用“transform:scale”进行跨浏览器体验,但它可能不会按您预期的那样工作。
(不推荐,对现有页面很容易)尽管它不是标准属性,但仍要使用 CSS“缩放”属性。牺牲了 Firefox。此外,使用绝对定位的 flexbox 会有一些小的意外行为。