你如何在 Safari 中获得全屏？

Question

主要是出于艺术原因，我想全屏运行我的幻灯片（纯 JavaScript）。 对于 Internet Explorer、Chrome、Firefox 和其他一些浏览器，当它们在 Windows 机器上运行时，这似乎没有问题：用户只需按 F11 键即可进入全屏模式（再按一次即可退出），如介绍幻灯片的前一页指示他/她这样做。 [顺便提一句。 这是观看者和幻灯片之间唯一的“物理”交互：按下按键也意味着“准备好”观看幻灯片，舒适地坐在离屏幕一定距离的地方，不要太近，等等。] 对于这个和其他我不想在全屏模式下自动[或单击]运行幻灯片的原因。

正如我所说，这在 Windows 机器上完美运行。 然而，这不适用于 Mac 上的 Safari：按 ^+cmd+F 不会让你全屏，据我所知，因为我的网页的 url 在屏幕顶部仍然可见，包括标题栏。 例如：

<A HREF="javascript:slideshow();
self.moveTo(0,0);self.resizeTo(screen.availWidth,screen.availHeight);"></A>

这给出了相同的结果：地址栏和标题栏仍然可见。

如果您想全屏观看我的幻灯片几分钟，请访问：

http://www.atelierfransvandestaak.nl/slideshow.html

我已经在几个论坛上搜索了几个月的答案，但徒劳无功。 现在我开始认为这不是代码问题而是定义问题。 因为在我看来，Apple 设计师所说的全屏并不是真正的全屏。 定义是一个标准问题：意思是，你不能改变它，因为世界其他地方都遵循它的规则。 或者你可以吗？ 所以我的主要问题是，我们能否就全屏视图达成一致[例如图像]。 如果没有，您也无法对其进行编码。 也许，这让我们远离 Stackoverflow 提出问题 [关于代码] 的指令，但我感谢任何建议或答案。

提前致谢，wimsch

附注。 我们全屏问题的原因 [=safari 不会进入原生全屏，而不是通过 javascript 代码，即使用户明确指示它 <<^ cmd F>>] 可能是，地址栏可以采取url 也是一个搜索字符串。 所以，我猜（快速）搜索引擎 [Spotlight] 与地址栏互连，这可以很容易地解释为什么地址栏仍然可见，从而阻止 safari 进入本机全屏。 你觉得这怎么样？

Answer 1

// mozilla proposal
element.requestFullScreen();
document.cancelFullScreen(); 

// Webkit (works in Safari and Chrome Canary)
element.webkitRequestFullScreen(); 
document.webkitCancelFullScreen(); 

// Firefox (works in nightly)
element.mozRequestFullScreen();
document.mozCancelFullScreen(); 

// W3C Proposal
element.requestFullscreen();
document.exitFullscreen();

更多信息在这里

Answer 2

我使用这个很棒的包解决了我所有的问题https://www.npmjs.com/package/screenfull

从自述文件：

跨浏览器使用 JavaScript 全屏 API 的简单包装器，可让您将页面或任何元素全屏显示。 消除浏览器实现差异，因此您不必这样做。

它只是有效，而且文档很棒。

Answer 3

这适用于 iPhone。 只需将屏幕旋转然后水平旋转

<meta name="viewport" content="width=device-width, user-scalable=0, minimal-ui">