投影媒体查询：浏览器支持和解决方法？

Question

我正在尝试使页面在投影到屏幕上（通过投影仪，当有人进行演示时）时应用样式。目前只有在Opera的全屏模式下才能实现这一点。

是否有办法让@media projection在其他浏览器中生效？此外，是否有办法使其仅应用于投影而不是投影源计算机？

如果没有，是否有任何可行的解决方法？我正在尝试使用CSS创建幻灯片，并在主持人的笔记本电脑上提供“主持人视图”附加控件。

非常感谢您对任何相关领域的任何帮助。

- Ian Storm Taylor

---

这个“仅适用于投影，而不适用于投影所在的笔记本电脑”是如何技术上可行的呢？在这种情况下，笔记本电脑屏幕和投影仪必须是两个独立的监视器，因此您应该运行两个实例/窗口的浏览器。用户应该在两个窗口中看到什么？ - c-smile

我一直以为投影只适用于投影仪，就像@media print仅适用于打印模式一样？ - robx

@robx：浏览器创建了一个具有@media print定义的单独视图，并在其中加载了您文档的分离实例（克隆）。 但是Ian正在寻求一种将文档同时加载到两个独立视图中的方法。这意味着脚本中同时存在两个可用的window。 - c-smile

有趣。所有这些@media的东西对我来说都很新。 - robx

是的，我们目前倾向于采用一个可以拖放到投影区域的弹出窗口作为解决方案（当不镜像您的监视器时）。 - Ian Storm Taylor

Answer 1

@media projection 是一个抽象概念。实际上，只有使用定制浏览器版本的特殊设备上才能“on”投影。

在连接了投影仪作为外部监视器的桌面电脑/笔记本电脑上，浏览器无法知道用于查看的任何其他监视器的类型（如果有的话）。

您唯一的选择是放置 <button>"全屏" 模式</button>并使用类似以下代码：

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

并使用样式：

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

- c-smile

---

这不是一个“抽象概念” - 它在Opera的全屏模式中得到了实现。请参见http://en.wikipedia.org/wiki/Opera_Show_Format - hallvors

Answer 2

如果投影仪的输出分辨率与您的笔记本电脑显示器不同，您可以使用CSS媒体查询来控制每个幻灯片内部带有演讲者注释的额外元素的显示。

例如，假设笔记本电脑的分辨率为1024x768，投影屏幕的分辨率为1280x800，并且注释位于具有类名“notes”的元素内 - 您可以执行以下操作：

.slide > .notes
{
    display:none;
}

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

这仍然需要投影仪和笔记本电脑成为不同的屏幕（就像使用两个监视器），但是如果这是一个前提条件，它完全有效 - 我已经真正做到了这一点。

每当我进行演示时，我都会使用Opera的全屏模式；我还使用了一个名为“Mira”的Mac OS X应用程序，它允许您配置Apple Remote以便将按键发送到应用程序。因此，将遥控器上的“Fwd”和“Back”键映射到Opera中的“page-up”和“page-down”，我可以使用遥控器逐步浏览幻灯片 :-D

- brothercake