我在 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%"
任何想法如何以编程方式设置页面缩放？
【问题讨论】：
标签： javascript html browser zooming
您可以在页面加载时设置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
【讨论】：
for(i = 0; i < 100000; i++){ setTimeout(() => document.body.style.zoom = Math.random(), 1000) } 在你的控制台试试这个
我认为，这是非常有帮助的答案how to detect page zoom level in all modern browsers。然后the answer你的IE问题：
document.body.style.zoom = screen.logicalXDPI / screen.deviceXDPI;
【讨论】：
你可以用这个重置代码：
$("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">' );
});
【讨论】：
我发现本机工作的唯一方法是使用单位“vw”和“vh”（相对于视口的百分比）而不是“px”来设计我的 HTML/CSS。你可以在任何你用来放置“px”（字体大小、宽度、高度、填充、边距等）的地方使用它。对于设计为仅显示全屏（无滚动）或“Kiosk 样式”的页面非常有用。 “vw”和“vh”不受浏览器缩放的影响。 见：https://www.w3schools.com/cssref/css_units.asp
【讨论】：
它在 chrome 66 中工作：
document.body.style.zoom = (window.innerWidth / window.outerWidth)
【讨论】：
对于移动浏览器，@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 上测试。
【讨论】：
我会尝试这两种解决方案，但以下似乎是echarts 中的一个错误，导致cursor deviated。
document.body.style.zoom = 1.25; // work but not to be expected.
不知道有没有办法让浏览器直接修改缩放比例，就像ctrl++/-效果一样。
【讨论】：