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

Question

我在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%"

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

Answer 1

您可以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/

Answer 2

您可以使用以下命令重置代码:

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

Answer 3

它在 chrome 66 中工作：

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

Answer 4

我认为，这是如何在所有现代浏览器中检测页面缩放级别的非常有用的答案。然后你的IE问题的答案：

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