游戏窗口全屏模式和全屏模式_新技术–全屏模式

游戏窗口全屏模式和全屏模式

New technology – fullscreen mode The new html5 technology – fullscreen API gives us an easy way to present a web page content in fullscreen mode. We are about to give you detailed information about the fullscreen mode. Just try to imagine about all possible advantages which you can get using this technology – fullscreen photo albums, videos, and even games. But before we describe this new technology, I have to note that this technology is experimental, and not all the browsers support it.

新技术-全屏模式新的html5技术-全屏API为我们提供了一种以全屏模式显示网页内容的简便方法。 我们将为您提供有关全屏模式的详细信息。 只是想像一下使用此技术可以获得的所有可能的优势–全屏相册，视频甚至游戏。 但是在我们描述这项新技术之前，我必须注意，这项技术是试验性的，并不是所有的浏览器都支持它。

As we mentioned before, this technology is new (experimental), it means, that its specification was not finally introduced, we have to use custom prefixes for different browsers, and, it is possible that the syntax and behavior can be changed in future versions of browsers. For today, it is supported by next browsers:

如前所述，这项技术是新技术(实验性的)，这意味着它的规范尚未最终引入，我们必须为不同的浏览器使用自定义前缀，并且可能在将来的版本中更改其语法和行为。浏览器。 今天，以下浏览器支持它：

• Chrome (v15)
  Chrome(v15)
• Firefox (v9)
  Firefox(v9)
• Safari (v5)
  Safari(v5)
• Opera (v12.10)
  歌剧(v12.10)
• Internet Explorer (v11)
  Internet Explorer(v11)

启动全屏模式 (Starting the full-screen mode)

Due to the fact that this mode is supported by different browsers differently, we have to foresee all the cases:

由于不同的浏览器对这种模式的支持不同，因此我们必须预见所有情况：

var elem = document.getElementById("myObject");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}

var elem = document.getElementById("myObject");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}

As you see, we can request the full screen mode for any DOM element (or we can apply it for the whole page – document.documentElement). This code sends a request to the user about permission to enable full-screen mode, if this request is accepted, all the toolbars and other panels in the browser will disappear, and the only thing on the screen will be the desired element or the whole web page.

如您所见，我们可以为任何DOM元素请求全屏模式(或者我们可以将其应用于整个页面– document.documentElement)。 此代码向用户发送有关启用全屏模式权限的请求，如果接受此请求，浏览器中的所有工具栏和其他面板将消失，并且屏幕上唯一的内容将是所需的元素或整个网页。

新CSS伪类 (New CSS pseudo-class)

A new CSS pseudo class was added – :full-screen. It can be used to style elements which are in full-screen mode. This is very useful, because it is obvious that there are more space for your elements in the full screen mode.

添加了新CSS伪类–：full-screen。 它可用于设置处于全屏模式的元素的样式。 这非常有用，因为很明显在全屏模式下您的元素有更多的空间。

:-webkit-full-screen #myObject {
  font-size: 20px;
  width: 100%;
}
:-moz-full-screen #myObject {
  font-size: 20px;
  width: 100%;
}

:-webkit-full-screen #myObject {
  font-size: 20px;
  width: 100%;
}
:-moz-full-screen #myObject {
  font-size: 20px;
  width: 100%;
}

附加信息 (Additional information)

There are few notifications: when the full-screen mode is successfully enabled, the document receives a ‘mozfullscreenchange’ event. When the full-screen mode is canceled, the document receives the mozfullscreenchange event (again). Pay attention, that this event doesn’t show if the document is entering or exiting the full-screen mode. Tip: if the document has a non null mozFullScreenElement, we are in the full-screen mode.

通知很少：成功启用全屏模式后，文档会收到“ mozfullscreenchange”事件。 取消全屏模式后，文档将再次收到mozfullscreenchange事件。 请注意，如果文档正在进入或退出全屏模式，则不会显示此事件。 提示：如果文档的mozFullScreenElement非空，则我们处于全屏模式。

What if fullscreen request fails? If it fails, the element that requested the fullscreen will receive a fullscreenerror event. Plus, your browser will log this error message to the Web Console

如果全屏请求失败怎么办？ 如果失败，则请求全屏显示的元素将收到全屏错误事件。 另外，您的浏览器会将错误消息记录到Web控制台

Finally, if you are ready to exit the full-screen mode, you can invoke the ‘cancelFullScreen’ method.

最后，如果您准备退出全屏模式，则可以调用“ cancelFullScreen”方法。

最后的例子 (Final example)

This is an example that you can use to switch the page document into full-screen mode. There are two event handlers (to handle with mozfullscreenerror and keydown events). Use the F or Enter key to enable the full-screen mode.

此示例可用于将页面文档切换到全屏模式。 有两个事件处理程序(用于处理mozfullscreenerror和keydown事件)。 使用F或Enter键启用全屏模式。

// mozfullscreenerror event handler
function errorHandler() {
   alert('mozfullscreenerror');
}
document.documentElement.addEventListener('mozfullscreenerror', errorHandler, false);
// toggle full screen
function toggleFullScreen() {
  if (!document.fullscreenElement &&    // alternative standard method
      !document.mozFullScreenElement && !document.webkitFullscreenElement) {  // current working methods
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.cancelFullScreen) {
      document.cancelFullScreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    }
  }
}
// keydown event handler
document.addEventListener('keydown', function(e) {
  if (e.keyCode == 13 || e.keyCode == 70) { // F or Enter key
    toggleFullScreen();
  }
}, false);

// mozfullscreenerror event handler
function errorHandler() {
   alert('mozfullscreenerror');
}
document.documentElement.addEventListener('mozfullscreenerror', errorHandler, false);
// toggle full screen
function toggleFullScreen() {
  if (!document.fullscreenElement &&    // alternative standard method
      !document.mozFullScreenElement && !document.webkitFullscreenElement) {  // current working methods
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.cancelFullScreen) {
      document.cancelFullScreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    }
  }
}
// keydown event handler
document.addEventListener('keydown', function(e) {
  if (e.keyCode == 13 || e.keyCode == 70) { // F or Enter key
    toggleFullScreen();
  }
}, false);

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

API：方法和事件 (API: Methods and Events)

partial interface Element {
  void requestFullscreen();
};
partial interface Document {
  readonly attribute boolean fullscreenEnabled;
  readonly attribute Element? fullscreenElement;
  void exitFullscreen();
};

partial interface Element {
  void requestFullscreen();
};
partial interface Document {
  readonly attribute boolean fullscreenEnabled;
  readonly attribute Element? fullscreenElement;
  void exitFullscreen();
};

说明 (Explanation)

• element.requestFullscreen() Displays element fullscreen.
  element.requestFullscreen()全屏显示元素。
• document.fullscreenEnabled Returns true if document has the ability to display elements fullscreen, or false otherwise.
  document.fullscreenEnabled如果文档能够全屏显示元素，则返回true，否则返回false。
• document.fullscreenElement Returns the element that is displayed fullscreen, or null if there is no such element.
  document.fullscreenElement返回全屏显示的元素；如果没有这样的元素，则返回null。
• document.exitFullscreen() Stops any elements within document from being displayed fullscreen.
  document.exitFullscreen()阻止文档中的所有元素全屏显示。

结论 (Conclusion)

The new full-screen technology gives us a great opportunity to get the maximum benefit from the screen. This is the real way to improve the user interface.

全新的全屏技术为我们提供了从屏幕中获得最大收益的绝佳机会。 这是改善用户界面的真正方法。

翻译自: https://www.script-tutorials.com/new-technology-fullscreen-mode/

游戏窗口全屏模式和全屏模式