简体繁体 English

如何构建全屏 html 5 web 应用程序？

[英]How to build a full screen html 5 web app?

原文 2011-05-29 21:22:00 7 4 javascript/ html5/ css3/ cross-browser/ fullscreen

Are there any currently accepted methods for building full screen web applications in HTML 5 using just JavaScript and CSS?是否有任何当前可接受的方法用于在 HTML 5 中仅使用 JavaScript 和 Z2C56C3686155AF75A60A0F6E9D80C1F7EDD3E9Z 构建全屏 web 应用程序？

If so, what are the pros and cons of each?如果是这样，每个的优点和缺点是什么？ What cross-browser quirks are there?有哪些跨浏览器怪癖？

4 个解决方案

This is bleeding edge, but the latest chrome builds have a Fullscreen API.这是最前沿的，但最新的 chrome 版本具有全屏 API。 See this slide deck for details:有关详细信息，请参阅此幻灯片：

http://html5-demos.appspot.com/static/html5-whats-new/template/index.html#42 http://html5-demos.appspot.com/static/html5-whats-new/template/index.html#42

Also, it looks like these dudes figured out a way to do it without resorting to unsupported features:此外，看起来这些家伙想出了一种方法来做到这一点，而无需求助于不受支持的功能：

http://www.html5rocks.com/en/tutorials/casestudies/gopherwoord-studios-resizing-html5-games.html http://www.html5rocks.com/en/tutorials/casestudies/gopherwood-studios-resizing-html5-games.html

There is a proposal which is based on discussions on the WHATWG mailing list .有一个基于WHATWG 邮件列表讨论的提案。 This was originally triggered by this WebKit API , but as far as I'm aware that only works on iOS and there are no other implementations at present.这最初是由这个 WebKit API触发的，但据我所知，它只适用于 iOS，目前没有其他实现。

As it stands, Full Screen mode can only be induced by the user directly telling the browser to go into that mode.就目前而言，全屏模式只能由用户直接告诉浏览器 go 进入该模式来诱导。

It's like back in the slave days.这就像回到奴隶时代。 You're the slave, the user is the master, and pixels are your food.你是奴隶，用户是主人，像素是你的食物。 They may not give you much, but they give you some, and you have to savor every last bit.他们可能不会给你太多，但他们会给你一些，你必须品尝最后一点。

This used to be possible back in the day - IE 4 did "Chromeless Windows" - but is no longer possible in pure HTML for security reasons.这在过去是可能的——IE 4 做了“Chromeless Windows”——但出于安全原因，在纯 HTML 中不再可能。

If you can have the user install local software, something like Mozilla Prism might work - I've never tried it myself though.如果您可以让用户安装本地软件，那么像Mozilla Prism之类的东西可能会起作用——不过我自己从未尝试过。