Question

我制作了一个由标签显示的游戏。当您单击按钮时，它可以在Internet浏览器上全屏显示，但是......

当我全屏显示时，可点击区域仅匹配画布的初始大小，这意味着您只能通过左上方屏幕上的小方块与游戏进行互动。

我已经想到了，不知何故，如果按F11，然后按F10，它就能完美运行。但如果我按F10而不先将浏览器设置为全屏模式，那么＆＃34;全屏＆＃34;画布实际上是一个出现在屏幕左上方的小方块，在黑色背景上，甚至没有调整大小......

不幸的是，我称之为＆＃34;游戏＆＃34;适用于对互联网不熟悉的受众。因此，要求人们按下＆＃34; F11＆＃34;然后＆＃34; F10＆＃34;这将是非常不方便的。设置......好吧，这很烦人。

所以，这是我的问题：有没有办法模仿＆＃34; ＆＃34; f11，f10 combo＆＃34;？

我的实际代码是：

<script>
function goFullScreen(){
var elem = document.getElementById("canvas");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}
}
        </script>

        <p><button onclick="goFullScreen();">Go fullscreen</button></p>

出于某种原因，上面的这个不等于＆＃34; F11，然后是F10 ......＆＃34;怎么样？！

感谢阅读。

编辑（附加信息）：

我尝试了边缘和mozilla firefox（行为几乎相同）
我没有使用devtools。
我的画布大小基本上设置如下：
以上内容与任何相关或棘手的.css内容无关。
对于html部分，我粘贴的代码几乎就是页面的全部内容。
最后，关于点击事件，我不知道该说什么，这是非常基础的：一个按钮，一个onclick事件链接到上面粘贴的功能。关于游戏本身，它不应该干涉，因为如果我将浏览器设置为全屏（使用＆＃34; F11＆＃34;键），则不会干扰，然后是全屏的页面内容（带有＆＃34; F10＆＃34;键）。任何其他方式都无法正常工作。

Answer 1

由于我们无法看到相关的javascript，html或css，我们只能猜测。

我的猜测是你没有调整画布大小和/或你从哪个元素获取鼠标事件。

你需要有一个resize事件，它会在页面大小改变时调整元素的大小，包括全屏调整大小。

// add a listener to the window resize event
addEventListener("resize",function(){
     canvas.width = innerWidth;  // This sets the resolution of the canvas
     canvas.height = innerHeight; // to match the page size.
     // As i don't see your CSS to be safe set it to pixels and match the canvas resolution
     canvas.style.width = innerWidth + "px"; // must be in pixel units
     canvas.style.height = innerHeight + "px"; // must be in pixel units

     // to play safe set to absolute positioning
     canvas.style.position = "absolute";
     canvas.style.top = "0px";
     canvas.style.left = "0px";



     // You also need to change the element that is getting the mouse
     // input (if not the canvas)
     // Calling it mouseElement 
     mouseElement.style.width = "100%";
     mouseElement.style.height = "100%";
     mouseElement.style.position = "absolute";
     mouseElement.style.top = "0px";
     mouseElement.style.left = "0px";

 }

以下是如何在全屏之间切换的方式。

// This function must be called from some type of user input (ie a mouse click event)
function toggleFullScreen() {
  const doc = document;
  if (!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement && !doc.msFullscreenElement ) {  
    const docEl = document.documentElement;
    if (docEl.requestFullscreen) { docEl.requestFullscreen() }
    else if (docEl.msRequestFullscreen) { docEl.msRequestFullscreen() }
    else if (docEl.mozRequestFullScreen) { docEl.mozRequestFullScreen() }
    else if (docEl.webkitRequestFullscreen) { docEl.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT) }
  } else {
    if (doc.exitFullscreen) { doc.exitFullscreen() }
    else if (doc.msExitFullscreen) { doc.msExitFullscreen() }
    else if (doc.mozCancelFullScreen) { doc.mozCancelFullScreen() }
    else if (doc.webkitExitFullscreen) { doc.webkitExitFullscreen() }
  }
}

以上代码将触发调整大小事件。

全屏和可点击区域（互联网浏览器）

1 个答案: