使用 JS 强制页面缩放 100%

Posted 2023-02-21

【中文标题】使用 JS 强制页面缩放 100%

【英文标题】：Force page zoom at 100% with JS

【发布时间】：2014-02-01 08:00:15

【问题描述】：

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

我尝试过使用这个 CSS：

zoom: 100%;

这个 html

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

还有这个 JS：

style="zoom: 75%"

任何想法如何以编程方式设置页面缩放？

【问题讨论】：

您无法重置缩放

所以我必须要求将缩放设置为 100%？好的谢谢。

HI 如何要求将缩放设置为 100%？

看到这个答案，也许对你有帮助：http://***.com/questions/14050841/disable-zooming-of-the-page-in-desktop-web-browsers-using-javascript-jquery#14051622

见：How to detect page zoom level in all modern browsers?

【参考方案1】：

您可以在页面加载时设置zoom 属性

document.body.style.zoom = 1.0

但是，zoom 是 not a standard property for all browsers，我建议改用 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 中运行我的应用程序。你能帮帮我吗？

我想如果我没记错的话，在 ie 中，比例是百分比 (0-100) 而不是像世界其他地方那样的乘数 (0-1)。

这只是转换 div 而不会影响浏览器的缩放级别 :(.

for(i = 0; i < 100000; i++) setTimeout(() => document.body.style.zoom = Math.random(), 1000) 在你的控制台试试这个

有效，也无效。它确实可以缩放内容，但不能像浏览器那样缩放。随着浏览器的缩放，一切看起来都很好，所有这些缩放和缩放一些页面元素完全被破坏了。

【参考方案2】：

我认为，这是非常有帮助的答案how to detect page zoom level in all modern browsers。然后the answer你的IE问题：

document.body.style.zoom = screen.logicalXDPI / screen.deviceXDPI;

【参考方案3】：

你可以用这个重置代码：

$("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">' );
);

【讨论】：

我不知道你能做到这一点！解决我在设置缩放时遇到的这个问题对我没有用 - 但它对其他事情会非常有用！

【参考方案4】：

我发现本机工作的唯一方法是使用单位“vw”和“vh”（相对于视口的百分比）而不是“px”来设计我的 HTML/CSS。你可以在任何你用来放置“px”（字体大小、宽度、高度、填充、边距等）的地方使用它。对于设计为仅显示全屏（无滚动）或“Kiosk 样式”的页面非常有用。 “vw”和“vh”不受浏览器缩放的影响。 见：https://www.w3schools.com/cs-s-ref/css_units.asp

【参考方案5】：

它在 chrome 66 中工作：

document.body.style.zoom = (window.innerWidth / window.outerWidth)

【参考方案6】：

对于移动浏览器，@Linden 的回答在 Chrome 上最适合我。然而，在移动端 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 上测试。

【参考方案7】：

我会尝试这两种解决方案，但以下似乎是echarts 中的一个错误，导致cursor deviated。

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

不知道有没有办法让浏览器直接修改缩放比例，就像ctrl++/-效果一样。