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