Projection media query: browser support and workarounds?

问题

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.

回答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 { ... }  

回答2:

If the projector's output is a different resolution than your laptop monitor, you can use a CSS media query to control the display of an extra element inside each slide, with notes for the presenter.

For example, let's say the laptop is 1024x768, the projected screen is 1280x800, and the notes are inside an element with the class name "notes" -- you'd do something like this:

.slide > .notes
{
    display:none;
}

@media projection and (width:1280px)
{
    .slide > .notes
    {
        display:block;
    }
}

It would still require the projector and the laptop to be different screens (like using two monitors), but with that as a given, it totally works -- I've done this for real.

I use Opera in fullscreen mode whenever I give presentations; I also use a Mac OS X app called "Mira", which allows you to configure the Apple Remote so it sends keystrokes to applications. So mapping the "Fwd" and "Back" keys on the remote to "page-up" and "page-down" in Opera, I can use the remote to step-through the slides :-D

来源：https://stackoverflow.com/questions/6378206/projection-media-query-browser-support-and-workarounds