Projection media query: browser support and workarounds?

Question

I'm trying to get styles applied to a page only when the page is projected on the wall (by a projector, when someone is giving a presentation). As the moment, I can only get this in Opera in fullscreen mode.

Is there any way to get @media projection to take affect in other browsers? Also, is there a way to make it only apply to the projection, and not the laptop its projecting from?

If not, are there any viable workarounds to this? I am trying to create a slideshow in css, but also offer a "presenter view" with extra controls on the laptop of the presenter.

Any help in any surrounding area is much appreciated.

Answer 1

@media projection is an abstract concept. Practically projection can be 'on' only on devices of special kind with custom browser builds.

On desktop/laptop with projector attached as an external monitor there is no way for the browser to know what kind of additional monitor is used (if any) for viewing.

The only option for you is to put <button>"Fullscreen" mode</button> and to use something like:

$(button).click( function() { $(document.body).toggleClass("fullscreen") } );

And use styles:

body { ... }    
body.fullsceen { ... }