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为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/

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

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

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

Answer 4

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

Answer 5

它适用于chrome 66：

  const loggedTime = new Date(lastLoginAt).getTime();
  const now = new Date();
  const currentTime = now.getTime();

 if ((currentTime - (loggedTime - (new Date()).getTimezoneOffset()*60*1000)) > (7200 * 1000)){ }

Answer 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上进行了测试。

Answer 7

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

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

我想知道是否有任何解决方案可以像ctrl + + / -一样直接调节缩放比例。

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

7 个答案: