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

发布于 2024-11-16 05:25:24 字数 259 浏览 3 评论 0原文

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

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

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

浮萍、无处依 2024-11-23 05:25:24

@mediaprojection是一个抽象概念。实际上，投影只能在具有自定义浏览器版本的特殊类型设备上“打开”。

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

您唯一的选择是设置并使用类似的内容：

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

并使用样式：

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

@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 { ... }

回复收藏 0 原文

唯憾梦倾城 2024-11-23 05:25:24

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

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

.slide > .notes
{
    display:none;
}

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

仍然需要投影仪和笔记本电脑是不同的屏幕（比如使用两个显示器），但既然如此，它完全可以工作——我已经真正做到了这一点。

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

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

回复收藏 0 原文

~没有更多了~