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

Posted 2023-03-06

【中文标题】投影媒体查询：浏览器支持和解决方法？

【英文标题】：Projection media query: browser support and workarounds?

【发布时间】：2011-09-16 17:14:18

【问题描述】：

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

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

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

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

【问题讨论】：

这种“仅适用于投影，而不适用于投影的笔记本电脑”在技术上是可行的吗？在这种情况下，笔记本电脑屏幕和投影仪必须是两个独立的显示器，因此您应该运行两个浏览器实例/窗口。哪个用户应该在两个窗口中看到？

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

@robx ：浏览器创建单独的视图，其中定义了@media print。并在其中加载文档的 单独 实例（克隆）。但 Ian 要求同时加载到两个单独视图中的文档之类的东西。表示它在脚本中同时有两个window。

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

是的，我们目前倾向于的解决方案是有一个可以拖到投影字段中的弹出窗口（当不镜像您的显示器时）。

【参考方案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

【参考方案2】：

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

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

您唯一的选择是输入<button>"Fullscreen" mode</button> 并使用类似：

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

并使用样式：

body  ...     
body.fullsceen  ...   

【讨论】：

这不是一个“抽象概念”——它在 Opera 中实现了全屏模式。见en.wikipedia.org/wiki/Opera_Show_Format