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

Question

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

Dan*_*bal 47 html javascript css html5

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

这里是我的网站链接最近我得到了增加其宽度的任务,就像我们按下的Firefox Ctrl +和浏览器缩放级别增加有任何方法在页面加载的所有浏览器中自动执行此操作.

Answer 1

Tim*_*ora 55

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

但这是可能的.

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

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

Run Code Online (Sandbox Code Playgroud)

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

注意:这实际上不是浏览器缩放.使用此技术,浏览器缩放仍设置为100%. (7认同)

Answer 2

Vin*_*nod 16

试试这个:

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

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

Run Code Online (Sandbox Code Playgroud)

它不工作Firefox和Internet Explorer它需要允许脚本任何建议 (2认同)

Answer 3

jer*_*ome 6

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

body { zoom: 2; }

Run Code Online (Sandbox Code Playgroud)

注意:这实际上并没有修改浏览器的缩放级别.它只是使页面上的一切更大:)

Answer 4

Kir*_*kov 5

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

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

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

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

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

归档时间：	13 年，6 月前
查看次数：	136101 次
最近记录：	5 年，11 月前