logo标签列表

使用JS强制页面缩放为100%

javascripthtmlbrowserzooming
56

我在Canvas中创建了一个小游戏，但是遇到了一个问题。一些将默认缩放设置为100%以外的用户无法看到整个游戏页面。

我尝试使用以下CSS：

zoom: 100%;

这个HTML

<meta name="viewport" content="initial-scale=1.0 , minimum-scale=1.0 , maximum-scale=1.0" />

同时这段JavaScript代码：

style="zoom: 75%"

有什么办法可以通过编程来设置页面缩放？

4
无法重置缩放。 - Mr. Alien
所以我得问一下是否将缩放设置为100％？好的谢谢。 - Crocsx
你好，我该如何请求将缩放设置为100%？ - Hitesh
看看这个答案，或许可以帮到你：https://dev59.com/eGzXa4cB1Zd3GeqPUolV - Victor
请参见：如何在所有现代浏览器中检测页面缩放级别？ - KyleMit
8个回答
68
您可以在页面加载时设置 zoom 属性
document.body.style.zoom = 1.0

但是，zoom并非所有浏览器的标准属性，我建议使用transform代替。
var scale = 'scale(1)';
document.body.style.webkitTransform =  scale;    // Chrome, Opera, Safari
 document.body.style.msTransform =   scale;       // IE 9
 document.body.style.transform = scale;     // General

http://jsfiddle.net/5RzJ8/

嗨Firat，我尝试了你的代码，但它对我不起作用。我在IE 10中运行我的应用程序。你能帮我吗？ - Hitesh
2
我认为如果我没记错的话，在IE中，缩放是以百分比（0-100）而不是像世界上其他地方一样使用乘数（0-1）。 - Steve K
3
这只是转换了div，而没有影响浏览器的缩放级别 :(。 - curtybear
2
请在您的控制台中尝试以下代码：for(i = 0; i < 100000; i++){ setTimeout(() => document.body.style.zoom = Math.random(), 1000) } - Vencovsky
2
它有时候有效，有时候无效。它可以缩放内容，但不像浏览器那样。在浏览器缩放的情况下，所有东西看起来都很好，但是在缩放和缩放的情况下，一些页面元素完全损坏了。 - Volmarg Reiso
document.body.style.zoom = 1.0无法工作，因为它与当前缩放有关 => 所需缩放 = 当前缩放 * 1.0。正确的解决方案已由Mehdi Souregi发布。 - gaffcz
11

你可以用以下方式重置代码：

$("input, textarea").focusout(function(){
    $('meta[name=viewport]').remove();
    $('head').append('<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=0">');

    $('meta[name=viewport]').remove();
    $('head').append('<meta name="viewport" content="width=device-width, initial-scale=yes">' );
});
我从没想过你可以这样做！ 对于我解决设置缩放的问题没有用，但它对其他事情将会非常有用！ - kris
7

它可以在 Chrome 66 中正常工作：

document.body.style.zoom = (window.innerWidth / window.outerWidth)
6
4
我发现原生实现的唯一方法是使用单位“vw”和“vh”（相对于视口的百分比）设计我的HTML / CSS，而不是“px”。您可以在以前放置“px”的任何地方使用它（例如字体大小，宽度，高度，填充，边距等）。这对于设计为仅全屏显示（无滚动）或“Kiosk-style”的页面非常有用。 “vw”和“vh”不受浏览器缩放的影响。 参见：https://www.w3schools.com/cssref/css_units.asp
2

对于移动浏览器，在Chrome上，@Linden的答案对我来说效果最好。然而，在移动FF上它需要一些额外的调整，我找到了适用于两个浏览器的版本：

let restore = $('meta[name=viewport]')[0];
if (restore) {
    restore = restore.outerHTML;
}
$('meta[name=viewport]').remove();
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">');
if (restore) {
    setTimeout(() => {
        $('meta[name=viewport]').remove();
        $('head').append(restore);
    }, 100); // On Firefox it needs a delay > 0 to work
}

此外，恢复的页面视口标签必须具有明确的最大比例，以允许在重置后在Firefox上进行缩放，因此我最初将其设置为以下内容：
<meta name="viewport" content="width=device-width, maximum-scale=10">

在移动版Chrome 76.0和移动版Firefox 68.1上进行测试。

我尝试了一秒的延迟（Android webview），效果很好。 - The concise
1

我会尝试这两个解决方案，但似乎存在一个 echarts中的错误导致光标偏差。

document.body.style.zoom = 1.25; // work but not to be expected.

我想知道是否有解决方案可以让浏览器直接修改缩放比例，就像使用 ctrl++/- 快捷键一样。

0

我有一个 CSS 技巧来解决这个问题，在 Chrome，Firefox 等浏览器上都支持，但实现起来似乎有点复杂。 你必须在 vw 中给出所有尺寸，包括字体大小、边距、填充宽度和高度。

你可以通过调整浏览器大小来测试它：

div {
   padding:1vw;
   margin:1vw;
   font-size:4vw;
   width:50vw;
   height:10vw;
   background:red;
}
<div>
text
</div>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接