如何在 Safari 中获得全屏？答案

【问题标题】：How do you get FULL SCREEN in Safari?如何在 Safari 中获得全屏？
【发布时间】：2014-10-20 14:56:55
【问题描述】：

主要出于艺术原因，我希望全屏运行我的幻灯片（纯 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 提出问题 [关于代码] 的指令相去甚远，但我感谢任何建议或回答。

提前致谢，呸呸呸

PS。我们的全屏问题 [=safari 不会进入本机全屏，不是通过 javascript 代码，即使用户明确指示它 >] 的原因可能是，地址栏可能会占用url 也是一个搜索字符串。所以，我猜（快速）搜索引擎 [Spotlight] 与地址栏互连，这可以很容易地解释为什么地址栏仍然可见，从而阻止 safari 进入原生全屏。您对此有何看法？

【问题讨论】：

标签： javascript safari fullscreen spotlight

【解决方案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();

更多信息here

【讨论】：

嗨 HDT。正如我在上面解释的那样，我确实更喜欢让用户通过按功能键或其他键命令而不是代码来进入全屏模式[比如“element.requestFullscreen();”，无论如何他/她都必须接受]。由于这在新的 Mac 上似乎是不可能的，据我所知，在 Safari 中进入全屏的唯一方法是通过添加到我的脚本中的代码来做到这一点。但是，对于“全屏”的真正含义存在很多困惑。对我来说，这是完全没有控件，因为幻灯片和用户之间不需要交互。无论如何感谢您的链接。

【解决方案2】：

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

来自自述文件：

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

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

【讨论】：

看起来不错。但是这个警告 --> “注意：Safari 在桌面和 iPad 上受支持，但在 iPhone 上不支持。这是浏览器的限制，而不是 Screenfull。”
@RockyKev 那怎么样？这是浏览器的限制，你无能为力
不适用于 iOS - iOS Safari 和 iOS Chrome。
@AnkitMaheshwari 如果您阅读了您之前的评论以及软件包的文档，您会发现这是浏览器和操作系统的限制

【解决方案3】：

这适用于 iPhone。只需将屏幕转为垂直，然后再转回水平

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

【讨论】：