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

Question

我试图仅在页面投影在墙上时（通过投影仪，当有人进行演示时）才将样式应用于页面。目前，我只能在全屏模式下在 Opera 中获得它。

有什么办法@media projection可以影响其他浏览器？另外，有没有办法让它只适用于投影，而不适用于投影的笔记本电脑？

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

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

Answer 1

如果投影仪的输出分辨率与笔记本电脑显示器的分辨率不同，您可以使用 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

Answer 2

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

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

您唯一的选择是放置<button>"Fullscreen" mode</button>和使用类似的东西：

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

并使用样式：

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