Using fullscreen mode

  • Revision slug: DOM/Using_full-screen_mode
  • Revision title: Using full-screen mode
  • Revision id: 31128
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment 40 words added

Revision Content

Things your users want to know

You'll want to be sure to let your users know that they can press the ESC key (or F11) to exit full-screen mode.

Also, any alphanumeric keyboard input while in full-screen mode causes a warning message to appear; this is done to help guard against phishing attacks. The following keys are the only ones that don't cause this warning message to appear:

  • left arrow
  • right arrow
  • up arrow
  • down arrow
  • space
  • shift
  • control
  • alt
  • page up
  • page down
  • home
  • end
  • tab
  • meta

In addition, navigating to another page, changing tabs, or switching to another application (using, for example, Alt-Tab) while in full-screen mode exits full-screen mode as well.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{ CompatUnknown() }} {{ CompatGeckoDesktop("9.0") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatGeckoMobile("9.0") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Gecko notes

Although this API was introduced in Gecko 9.0 {{ geckoRelease("9.0") }}, it's not enabled by default in that release. To enable it, set the full-screen-api.enabled preference to true.

Specification

Not part of any specification.

Revision Source

<h2 name="Specification">Things your users want to know</h2>
<p>You'll want to be sure to let your users know that they can press the ESC key (or F11) to exit full-screen mode.</p>
<p>Also, any alphanumeric keyboard input while in full-screen mode causes a warning message to appear; this is done to help guard against phishing attacks. The following keys are the only ones that don't cause this warning message to appear:</p>
<div> <div class="threecolumns" style="undefined"> <ul> <li>left arrow</li> <li>right arrow</li> <li>up arrow</li> <li>down arrow</li> <li>space</li> <li>shift</li> <li>control</li> <li>alt</li> <li>page up</li> <li>page down</li> <li>home</li> <li>end</li> <li>tab</li> <li>meta</li> </ul> </div>
</div>
<p>In addition, navigating to another page, changing tabs, or switching to another application (using, for example, Alt-Tab) while in full-screen mode exits full-screen mode as well.</p>
<h2 name="Specification">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatGeckoDesktop("9.0") }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
<div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Mobile</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatGeckoMobile("9.0") }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
<h3>Gecko notes</h3>
<p>Although this API was introduced in Gecko 9.0 {{ geckoRelease("9.0") }}, it's not enabled by default in that release. To enable it, set the <code>full-screen-api.enabled</code> preference to <code>true</code>.</p>
<h2 name="Specification">Specification</h2>
<p>Not part of any specification.</p>
Revert to this revision