如何在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

我已经在几个论坛上搜索了几个月，但是无济于事。现在我开始认为这不是代码的问题，而是定义的问题。因为我认为苹果设计师称之为全屏实际上并不是真正的全屏。定义是一个标准问题：这意味着您无法更改它，因为其余世界遵循其规则。或者你可以吗？ 因此，我的主要问题是，我们可以达成全屏视图 [例如图像] 的共识吗？ 如果不能，您也无法对其进行编码。也许，这使我们远离Stackoverflow的有关代码的提问指导方针，但我感激任何建议或答案。

预先感谢， wimsch

附：我们全屏问题 [= Safari无法进入本机全屏模式，即使用户通过 javascript 代码显式指示 <<^ cmd F>>] 的原因可能是地址栏既可以是URL，也可以是搜索字符串。因此，我想快速搜索引擎[Spotlight]与地址栏相互连接，这很容易解释为什么地址栏仍然可见，从而防止Safari进入本机全屏幕。你对此有什么看法？

- user2317959

---

我在我的网站上遇到了类似的问题。请问您是如何解决这个问题的？ - Janaka

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();

更多信息请点击此处

。

- HDT

---

你好HDT。如我上面所解释的，我更喜欢让用户通过按下功能键或其他键命令进入全屏模式，而不是使用代码（例如“element.requestFullscreen();”），无论如何他/她都必须接受。由于我得到了很好的消息，似乎在新的Mac上这似乎是不可能的，在Safari中进入全屏模式的唯一方法是通过添加到我的脚本中的代码来实现。然而，关于“全屏”真正意义的概念存在很多混淆。对我来说，它是完全没有控件，因为幻灯片和用户之间没有交互需要。无论如何，感谢您提供的链接。 - user2317959

Answer 2

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

从自述文件中可以看到：

这是一个简单的包装器，用于跨浏览器使用JavaScript全屏API，可以将页面或任何元素带入全屏模式，平滑处理浏览器实现的差异，让您不必担心。

它非常好用，文档也写得很好。

- Andrea Gherardi

---

看起来不错。但是需要注意，Safari 只支持桌面版和 iPad 版本，而不支持 iPhone 版本。这是浏览器的限制，而非 Screenfull 的问题。 - Rocky Kev

@RockyKev 那个怎么办？这是浏览器的限制，你无能为力。 - Andrea Gherardi

在iOS上无法工作——无论是iOS Safari还是iOS Chrome。 - Ankit Maheshwari

@AnkitMaheshwari 如果你读了你之前的评论，以及软件包的文档，你就会发现这是浏览器和操作系统的限制。 - Andrea Gherardi

Answer 3

这适用于iPhone。只需将屏幕垂直，然后再水平即可。

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

- Rob Atwater