Question

我正在尝试仅在页面投影到墙上时（通过投影仪，当某人正在进行演示时）将样式应用于页面。就目前而言，我只能在全屏模式下在Opera中获得此功能。

有没有办法让@media projection在其他浏览器中生效？另外，有没有办法让它只适用于投影，而不是投影的笔记本电脑？

如果没有，是否有任何可行的解决方法？我正在尝试在css中创建幻灯片，但也提供了一个“演示者视图”，在演示者的笔记本电脑上有额外的控件。

非常感谢任何周边地区的任何帮助。

Answer 1

@media projection是一个抽象概念。实际上projection只能在具有自定义浏览器构建的特殊设备上“打开”。

在台式机/笔记本电脑上连接投影仪作为外部显示器时，浏览器无法知道使用哪种附加显示器（如果有）进行查看。

唯一的选择是放<button>"Fullscreen" mode</button>并使用以下内容：

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

并使用样式：

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

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

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

2 个答案: