17

我正在尝试使应用程序在 iOS 6 的 Safari 中以全屏模式（没有顶部栏）运行。代码如下：

var elem = document.getElementById("element_id");
if (elem.requestFullScreen) {
  elem.requestFullScreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullScreen) {
  elem.webkitRequestFullScreen();
}

它在桌面浏览器上运行良好。但在 Mobile Safari (iOS) 6 中不起作用。

对这个问题有任何想法吗？

4

8 回答 8

25

不支持...

http://caniuse.com/fullscreen

于 2012-10-10T15:36:55.990 回答
8

在提出这个问题六年后......，以“webkit”为前缀的全屏 API 现在似乎可以在 iPad 上的 iOS 12.1 的移动 Safari 中工作，但不能在 iPhone 上工作。CanIUse似乎还没有报道，到目前为止，我发现的唯一 Apple 信息是“Safari 中的新功能”页面中有关 iOS 12 的行项目以及发行说明和推文：

昨天，我将我的 iPhone 和 iPad 从 iOS 11.x 更新到了 iOS 12.1。全屏 API 在 iPad 上的 Safari 中为我工作，但不适用于 iPhone。在 iPad 上，“alert(document.fullscreenEnabled)”显示“undefined”，但“alert(document.webkitFullscreenEnabled)”显示“true”。在 iPhone 上，两者都显示“未定义”。

使用以下脚本，我可以在 iPad 上的 Safari 中以全屏模式显示。

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        #target {
            width: 150px; height: 100px; padding: 50px 0 0 0;
            margin: 50px auto; text-align: center;
            background-color: tan;
        }
    </style>
</head>
<body>
    <div id="target">Click or touch me</div>
    <script>
        (function(w) {
            "use strict";
            var d = w.document;
            var t = d.getElementById("target");

            t.addEventListener("click", function() {
                d.documentElement.webkitRequestFullscreen();
                // Compare alternative to preceding line, calling
                // method on target element instead:
                // t.webkitRequestFullscreen();
                // And compare changing target's style on change:
                // t.style.width = "100%";
                // t.style.height = "100%";
            });

            // alerts "undefined" in iOS 12.1 Safari on iPad and iPhone
            alert(d.fullscreenEnabled);
            // alerts "true" in iOS 12.1 Safari on iPad, "undefined" on iPhone
            alert(d.webkitFullscreenEnabled);
        }(window));
    </script>
</body>
</html>

在全屏显示时，iPad 上的 Safari 在左上角插入一个“X”的 UI 元素，用于触摸退出全屏。

在 Site Point上玩2014 年全屏 API教程的演示页面在我的 iPad 上也运行良好。请注意，使用 2012 版 Site Point 教程的旧的、过时的演示页面两次在 Safari 中冻结了我的 iPad，我不得不重新启动 iPad 才能逃脱。

在我的 iPad 上玩screenfull.js 库的演示页面也很有效。

于 2018-11-04T22:08:42.880 回答
7

你不能使用全屏。如果您正确设置了元标记，并将 Web 应用程序放在主屏幕上，那么您可以摆脱所有 safari 杂物，但您仍然可以使用 iOS 状态栏（连接、时钟、电池）。 

<meta name="apple-mobile-web-app-capable"
  content="yes" />
<meta name="apple-mobile-web-app-status-bar-style"
  content="black-translucent" />

有很多资源，这是我一直在使用的资源：

http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/

Apple自己的文档也很好：

http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

但是，简而言之，从 iOS 6.1 开始，您无法在 iOS 设备上部署全屏 Web 应用程序。状态栏将始终存在。

于 2013-05-10T15:37:12.390 回答
5

https://developer.apple.com/reference/webkitjs/htmlvideoelement

if (elem.webkitEnterFullScreen) {
  elem.webkitEnterFullScreen();
}

这个对我有用。

于 2017-03-15T08:35:51.033 回答
1

下面滚动iOS中的状态栏。在你的 $(document).ready 中尽早调用它

$('body').scrollTop(1);

这在目前最高版本 6.x 中有效，但似乎不适用于 iOS7 浏览器的 beta 版本。与往常一样，底部的浏览器工具栏是固定的。

于 2013-06-20T18:48:24.940 回答
1

@Tom-Andraszek 部分正确。Apple 最近（截至 2019 年初）将 iPadOS 与 iOS 分离，现在fullscreen api仅支持 iPadOS Safari。

以下是如何为 iPadOS 12.x Safari 及更高版本的 Web 应用程序实现全屏功能：

在 iPad Safari 上全屏显示。

披露：在上述链接上共享的博客是我的。值得一提的是，iPadOS 上的 Chrome 和其他浏览器仍然不支持全屏 API。

于 2019-07-25T04:00:26.587 回答
0

It works on iPhone (iOS 12.1.4) when you enable it:

Settings -> Safari -> Advanced -> Experimental Features -> Fullscreen API

于 2019-03-29T01:55:01.910 回答
0

有一个非常好的 hack 可以模拟全屏模式，用户可以按照自己的意愿进入或离开它。我真的不知道它为什么可以工作，或者它是否可以在其他平台上工作，但在我的 iPhone Safari 上看起来就像预期的那样。

然而，这个解决方案有一些限制。它只能用于不使用超过屏幕所能提供的空间的 Web 应用程序，并且用户必须在页面加载后更改为横向模式。

给你的 html 和 body 100% 的高度和宽度

html, body {
  /* Avoid ugly scrollbars */
  overflow: hidden;
  /* Reset default browser paddings etc */
  margin: 0;
  padding: 0;
  border: 0;
  /* 100% size */
  width: 100%;
  height: 100%;
}

现在是骇人听闻的部分。在顶部给你的身体 1px 边距

body {
  margin-top: 1px;
}

您要做的最后一件事是将所有 Web 应用程序的内容放入一个额外的 div 中，位置固定，这样边距就不会影响它

.wrapper {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
}

等等瞧。旋转你的设备，看看这些丑陋的导航栏消失了。非常适合真正的全屏游戏。

我敢肯定，这可以以某种方式用作 polyfill，尽管不是每个人都想制作全屏游戏。

我希望它对某人有用。

达斯·穆恩

于 2019-03-03T21:44:23.410 回答