x5-fullscreen

Right now Apple, Microsoft, Google and Mozilla are pushing towards “flat” design by slimming down the visual clutter of their applications. Despite this minimalist trend, it is unavoidable that at least a few buttons and menu options will remain in browsers.

目前，苹果，微软，谷歌和Mozilla正在通过减少其应用程序的视觉混乱来推动“扁平化”设计。 尽管有这种最低限度的趋势，但不可避免的是浏览器中至少会保留一些按钮和菜单选项。

Those same browsers are being used to display games, video and other content, where the presence of window “chrome” is deeply distracting. As a separate application, Adobe Flash had a “fullscreen” mode that can take over the complete screen, but, as with most other plugin features, HTML5 is superseding it, in the form of the FullScreen API.|

那些相同的浏览器被用于显示游戏，视频和其他内容，而窗口“ chrome”的存在则使人分心。 作为单独的应用程序，Adobe Flash具有“全屏”模式，可以接管整个屏幕，但是与大多数其他插件功能一样，HTML5以FullScreen API的形式取代了它。

Like Geolocation, the Fullscreen API is permission-based: the user must explicitly request content to be displayed in fullscreen mode; it cannot be imposed on a page.  After launching fullscreen, the browser asks if the user wants to keep things that way.

与地理位置一样，全屏API也是基于权限的： 用户必须明确要求以全屏模式显示内容 ； 不能将其强加于页面上。 启动全屏后，浏览器会询问用户是否要保留这种方式。

While this works as a practical safeguard, I suspect that some web developers might still regard the Fullscreen API as the 21^st century equivalent of the popup window. The reality is that fullscreen mode is not for every website.  However tempting, it is likely that most general-interest sites do not require hijacking user’s screen. In most cases, fullscreen display should be limited to instances in which the user is to be engaged without distraction for several minutes, such as:

虽然这个作品作为一个实际的保障，我怀疑有些网站开发者可能仍然把全屏API作为21 ^世纪相当于弹出窗口。 现实情况是并非全屏模式适用于每个网站 。 无论多么诱人，大多数有共同利益的网站都可能不需要劫持用户的屏幕。 在大多数情况下，全屏显示应仅限于几分钟内不分心地与用户互动的情况，例如：

• Extended presentations 扩展演讲
• Browser-driven kiosk applications 浏览器驱动的信息亭应用
• Games 游戏类
• Video content 影片内容

Keep in mind that the average visitor stays on a web page for less than a minute; engaging fullscreen mode should therefore be reserved for very particular applications. It’s also important to note that your content should be delivered at sufficiently high resolution to be presented across the screen: responsive images are a must when offering fullscreen mode.

请记住，普通访问者在网页上停留的时间少于一分钟； 因此，应为非常特殊的应用保留全屏模式。 同样重要的是要注意，您的内容应以足够高的分辨率交付，以在屏幕上呈现：提供全屏模式时，必须提供响应图像 。

浏览器支持 (Browser Support)

The Fullscreen API has good browser support on the desktop: Firefox 10+, Chrome 15+, Internet Explorer and 11 and Safari 5.1 all support the API. The issue right now is that each browser interprets the existing API with slight modifications to the syntax, just like CSS vendor prefixes. For example, the requestFullscreen method:

全屏API在桌面上具有良好的浏览器支持：Firefox 10 +，Chrome 15 +，Internet Explorer和11和Safari 5.1均支持该API。 现在的问题是，每个浏览器都对CSS进行了一些微小的修改，就解释了现有的API，就像CSS vendor prefixs一样 。 例如， requestFullscreen方法：

element.requestFullscreen();
element.mozRequestFullScreen();
element.webkitRequestFullscreen();
element.msRequestFullscreen();

Note that requestFullscreen() starts with a lowercase letter in its standard form, and screen has a lowercase s, but the method begins with a capital letter when a prefix is added, keeping to JavaScript’s camelCase convention. Because of the subtle differences in the syntax, I suggest you copy and paste the methods to avoid typos.

请注意， requestFullscreen()以其标准格式的小写字母开头，而screen具有小写的s ，但是在添加前缀时，该方法以大写字母开头，并遵守JavaScript的camelCase约定。 由于语法上的细微差异，建议您复制并粘贴方法以避免输入错误。

Internet Explorer pre version 11 has its own, very different, proprietary method, which I’ll address in a future article.

Internet Explorer 11以前的版本有其自己的，非常不同的专有方法，我将在以后的文章中介绍。

全屏支持编码 (Coding For FullScreen Support)

Now that we understand the basic requirements for the FullScreen API, let’s look at the ways it might be used in browsers that support it.  First, we need to ensure that the right method is called for the appropriate browser. We’ll do that in a function:

现在，我们了解了FullScreen API的基本要求，让我们看一下在支持它的浏览器中可能使用它的方式。 首先，我们需要确保为适当的浏览器调用正确的方法。 我们将在一个函数中执行此操作：

function launchFullScreen(element) {if (element.requestFullscreen) {
element.requestFullscreen();}else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();}else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();}else if (element.msRequestFullscreen) {
element.msRequestFullscreen();}
}

The function takes a single argument, which defines what will be pushed into fullscreen mode. If you want the entire page to be displayed this way, the root documentElement should be passed. This action will commonly be associated with a button or link somewhere on the page:

该函数采用单个参数，该参数定义将被推送到全屏模式的内容。 如果要以这种方式显示整个页面，则应传递根documentElement 。 此操作通常与页面上某处的按钮或链接相关联：

<button onclick="launchFullScreen(document.documentElement)"> Fullscreen </button>

Using the same function, you can pass any identifiable element and its content into fullscreen mode:

使用相同的功能，可以将任何可识别的元素及其内容传递到全屏模式：

<button onclick="launchFullScreen(document.getElementById('pic'))">
Fullscreen Image </button>

Note that HTML5 video has natural fullscreen support built into the browser.

请注意， HTML5视频在浏览器中内置了自然的全屏支持。

Using fullscreen mode often implies that new CSS will be applied to the content, and/or that elements will be swapped out for an alternative high-resolution version.

使用全屏模式通常意味着将新CSS应用于内容，和/或将元素替换为替代的高分辨率版本 。

退出全屏模式 (Exiting Fullscreen Mode)

While the ESC key is a standard browser UI option to escape fullscreen mode, it’s good practice to present a visible option to do so. Note that the method swaps between CancelFullScreen (the old version of the spec) to exitFullscreen, the new version.

虽然ESC键是退出全屏模式的标准浏览器UI选项，但是最好提供一个可见的选项来退出全屏模式。 请注意，该方法在CancelFullScreen (规范的旧版本)与exitFullscreen (新版本)之间exitFullscreen 。

function cancelFullScreen() {if (document.exitFullscreen) {
document.exitFullscreen();} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();} else if (document.msExitFullscreen) {
document.msExitFullscreen();}
}

Again, this is usually associated with an interface element:

同样，这通常与接口元素相关联：

<button onclick="cancelFullScreen(documentElement)">Cancel Fullscreen</button>

As you can imagine, positioning these interface elements and making them available to the user at appropriate times can become a little complicated.

您可以想象，放置这些接口元素并在适当的时间将其提供给用户可以变得有些复杂。

Keep in mind that users can still reject the initial FullScreen prompt: if they do so, the browser will fall back into standard “windowed” operation. Needless to say, the presentation of your content should continue regardless.

请记住，用户仍然可以拒绝最初的“全屏”提示：如果这样做，浏览器将退回到标准的“窗口式”操作。 不用说，无论如何，内容的呈现都应继续。

翻译自: https://thenewcode.com/708/Introducing-the-HTML5-FullScreen-API

x5-fullscreen