Question

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

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中无效。

关于这个问题的任何想法？

Answer 1

不支持......

http://caniuse.com/fullscreen

Answer 2

您无法使用全屏。如果您正确设置元标记，并将Web应用程序放在主屏幕上，那么您可以摆脱所有的safari cruft，但您仍然可以使用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应用程序。状态栏将始终存在。

Answer 3

问了这个问题六年后，“ webkit”前缀的全屏API现在似乎可以在iPad上的iOS 12.1的移动Safari中运行，而在iPad上却不能。似乎尚未在CanIUse上进行报道，到目前为止，我唯一发现的Apple信息是"What's New in Safari" page和release notes和{{ 3}}：

昨天，我将iPhone和iPad从iOS 11.x更新到了iOS 12.1。全屏API适用于iPad上的Safari，但不适用于iPhone。在iPad上，“ alert（document.fullscreenEnabled）”显示为“未定义”，但是“ 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元素以触摸以退出全屏。

在我的iPad上，使用2014年全屏API tweet的demo page也可以很好地工作。当心，使用旧版tutorial at Site Point的2012年版本的Site Point教程两次使我的iPad在Safari中冻结，我不得不重新启动iPad才能逃脱。

在我的iPad上玩outdated demo page中的demo page也很有效。

Answer 4

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

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

它对我有用。

Answer 5

以下滚动iOS中的状态栏。在$（document）.ready

中尽早调用它

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

此版本目前适用于6.x版本，但似乎无法在iOS7浏览器的测试版中使用。与往常一样，底部的浏览器工具栏是固定的。

Answer 6

有一个非常不错的技巧来模仿全屏模式，用户可以随意输入或退出它。我真的不知道为什么它可以工作，或者它是否可以在其他平台上工作，但是在我的iPhone Safari上看起来像预期的那样。

尽管如此，该解决方案仍存在一些局限性。它只能用于不占用屏幕空间的Web应用程序，并且用户必须在页面加载后更改为横向模式。

将您的html和正文的高度和宽度设为100％

private static void setDataPointColor(XmlObject series, int number, String colorHex) {
    XmlCursor cursor = series.newCursor();
    cursor.toLastChild();
    cursor.beginElement(new QName("http://schemas.microsoft.com/office/drawing/2014/chartex", "dataPt", "cx"));
    cursor.insertAttributeWithValue("idx", "" + number);
    cursor.beginElement(new QName("http://schemas.microsoft.com/office/drawing/2014/chartex", "spPr", "cx"));
    cursor.beginElement(new QName("http://schemas.openxmlformats.org/drawingml/2006/main", "solidFill", "a"));
    cursor.beginElement(new  Name("http://schemas.openxmlformats.org/drawingml/2006/main", "srgbClr", "a"));
    cursor.insertAttributeWithValue("val", colorHex);

    cursor.dispose();
}

现在是hacky部分。在顶部给您的身体1px的边距

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

最后要做的就是将所有Web应用程序的内容放入固定位置的额外div中，以使页边距不会影响

body {
  margin-top: 1px;
}

等等。旋转设备，然后看到这些难看的导航栏消失。非常适合真正的全屏游戏。

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

我希望它对某人有用。

暗月

Answer 7

启用它后，它就可以在iPhone（iOS 12.1.4）上运行：

设置-> Safari->高级->实验功能->全屏 API

Answer 8

@ Tom-Andraszek部分正确。苹果最近（截至2019年初）将iPadOS与iOS分开，并且他们仅在去年秋天（2018年）的某个时候提出了对iPad Safari上全屏API的支持。您可以通过以下方法为您的Web应用程序实现完整的跨浏览器功能，尤其是涵盖iPadOS 12.x Safari：

Going fullscreen on iPad Safari.

披露：我已经撰写了在上述链接上共享的博客文章。请注意，iPadOS上的Chrome仍不支持全屏api，iPhone上的iOS毫无疑问。

全屏api HTML5和Safari（iOS 6）

8 个答案: