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

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

javascript css html

Javascript 如何在页面加载时提高浏览器缩放级别？,javascript,css,html,Javascript,Css,Html,如何在页面加载时提高浏览器缩放级别这是我最近的任务，我得到的任务是增加它的宽度，就像我们按Firefox键一样，如果浏览器缩放级别增加，是否有任何方法可以在页面加载时在所有浏览器中自动执行此操作。您可以尝试CSS缩放规则。我从未真正尝试过，但从理论上讲，设置如下css规则可能会满足您的需要： body { zoom: 2; } 注意：这实际上并没有修改浏览器的缩放级别。它只会让页面上的内容变得更大：）试试这个： <script type="text/javascript">

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

这是我最近的任务，我得到的任务是增加它的宽度，就像我们按Firefox键一样，如果浏览器缩放级别增加，是否有任何方法可以在页面加载时在所有浏览器中自动执行此操作。

您可以尝试CSS

缩放规则。我从未真正尝试过，但从理论上讲，设置如下css规则可能会满足您的需要：
body { zoom: 2; }

注意：这实际上并没有修改浏览器的缩放级别。它只会让页面上的内容变得更大：）
试试这个：
<script type="text/javascript">
        function zoom() {
            document.body.style.zoom = "300%" 
        }
</script>

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


函数zoom（）{
document.body.style.zoom=“300%”
}
内容
我个人认为这是个坏主意；或者设计你的网站使其易于扩展（使用合适的CSS/HTML技术并不困难），或者只允许用户做他们想做的事情（可能他们已经缩放了浏览器或者他们使用了低分辨率）。通常，您不应该为人们做出用户体验决策
但这是可能的
演示：
请注意，此答案的早期版本使用了transform
来支持更多浏览器。然而，这个缩短的代码似乎适用于Chrome、FF、Safari和IE的当前版本（以及IE的早期版本，它们支持zoom
已经很长时间了）。
我有一个PWA，它有一个带有大量空白的极简设计，最初用于手机（所以一开始我没有想到大屏幕）
因此，当你在大屏幕（电视或大屏幕）上打开它时，它看起来真的很难看（因为它在那一点上有太多的空白）。作为一个用户，我需要每次放大它。我的网络应用程序更美观，而且当它在大屏幕上放大一点时，在电视上的沙发上更容易使用
所以在@media中，如果显示太宽，我会更改缩放属性。
问题在于-moz变换：缩放与缩放完全不同
底线如果你想用css缩放网站，你有三个选择：

（推荐，现有页面更难）在开发页面时使用em和rem单位。这将允许更改页面的“缩放”，就像更改正文上的字体大小一样简单
（对于现有页面更容易）使用“transform:scale”来获得跨浏览器体验，但它可能无法按预期工作
（不推荐，对现有页面来说很容易）使用CSS“zoom”属性，尽管它不是一个标准属性。牺牲Firefox。另外，在绝对定位的FlexBox中有一些小的意外行为
注意：我已经在谷歌上搜索过了，但没有找到解决这个问题的方法。如果你总是希望网站更大，为什么不把它设计得更大？@TimMedora感谢你的回复，事实上，增加所有东西的大小需要更多的时间，我想如果我只是增加缩放级别，那么最好在页面中添加代码作为一个decade是web开发的老手，从来没有想过我会想缩放，因为它侵犯了用户的控制范围。但是，对于我的intranet应用程序，多个用户根据他们不同的视力设置了不同的分辨率。我的网站缩放得很好，但在某些情况下，它太大了，需要独立缩放我可以提供一个他们可以保存的设置（保存在我们的数据库中）这会缩小网站，这样他们就不必在每次访问我的应用程序时重复干扰放大/文本大小控制。非常感谢您，您的代码在chrome中运行得非常好。让我检查一下其他浏览器不运行Firefox，在internet explorer中需要允许脚本任何建议Hi Iqbal尝试使用css body{zoom:300%；}css在Chrome浏览器、internetexplorer浏览器中放大它的工作范围，但不在Chrome浏览器中FireFox@DanishIqbal这个答案在FireFox中使用了-moz transform
：@jaremysawesome谢谢你，它在Chrome浏览器和Internet Explorer中工作得如此之快，但在FireFox中却没有suggestion@DanishIqbal这适用于FF：它使用-moz变换：缩放（2）“-moz transform zoom”与“zoom”不同。第一个版本打破了我复杂的网站布局，其中包含固定和绝对定位的元素。非常感谢它在Firefox、Chrome中工作正常，但在旧的internet explorer中不工作任何建议我也在下载ie8@DanishIqbal-您需要使用two支持旧版本IE的不同方法。我已更新我的示例以显示对所有浏览器的支持。注意：这实际上不是浏览器缩放。使用此技术，浏览器缩放仍然设置为100%。是的，同意@cronoklee。问题是尺寸将报告为100%，并且在视觉上显示为200%时，可能有问题。视口仍然是100%。例如，当显示视频时，一个部分位于视口下方，用户无法按停止按钮。使用浏览器缩放，它工作得非常完美。@Erwinus-是的，请注意，这个答案已经有3.5年历史了，我当时认为这是个坏主意。我相信所有现代浏览器现在都支持nat我喜欢缩放，所以没有充分的理由对整个页面使用这种方法。缩放特定元素仍然有其用途（例如，在鼠标悬停时设置元素大小的动画）。
.zoom {
    zoom: 2;
    -moz-transform: scale(2);
    -moz-transform-origin: 0 0;
}