我正在尝试让应用程序在 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 中不起作用。
对这个问题有任何想法吗？
【问题讨论】：
标签： html api mobile-safari ios6 fullscreen
【讨论】：
在提出这个问题六年后...，以“webkit”为前缀的全屏 API 现在似乎可以在 iPad 上的 iOS 12.1 的移动 Safari 中工作，但不能在 iPhone 上工作。 CanIUse 似乎还没有报道，到目前为止，我发现的唯一 Apple 信息是 "What's New in Safari" page 和 release notes 和 tweet 中有关 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 元素，用于触摸退出全屏。
使用 2014 年全屏 API tutorial at Site Point 的 demo page 在我的 iPad 上运行良好。当心，玩旧的，outdated demo page 的 2012 版 Site Point 教程两次在 Safari 中冻结了我的 iPad，我不得不重新启动 iPad 才能逃脱。
在我的 iPad 上玩 demo page 和 screenfull.js library 的效果也很好。
【讨论】：
您不能使用全屏。如果您正确设置了元标记，并将 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 自己的文档也不错：
但是，简而言之，从 iOS 6.1 开始，您无法在 iOS 设备上部署全屏 Web 应用程序。状态栏将始终存在。
【讨论】：
window.open(location.href, "_self").close(); 但它不起作用。谢谢
https://developer.apple.com/reference/webkitjs/htmlvideoelement
if (elem.webkitEnterFullScreen) {
elem.webkitEnterFullScreen();
}
它对我有用。
【讨论】：
以下内容会滚动 iOS 中的状态栏。在你的 $(document).ready 中尽早调用它
$('body').scrollTop(1);
目前，这适用于 6.x 版，但似乎不适用于 iOS7 浏览器的测试版。与往常一样，底部的浏览器工具栏是固定的。
【讨论】：
@Tom-Andraszek 部分正确。 Apple 最近（截至 2019 年初）将 iPadOS 与 iOS 分离，现在它们仅支持 iPadOS Safari 上的fullscreen api。
以下是为 iPadOS 12.x Safari 及更高版本的网络应用实现全屏功能的方法：
Going fullscreen on iPad Safari.
披露：在上述链接上分享的博客是我的。值得一提的是，iPadOS 上的 Chrome 和其他浏览器仍然不支持全屏 api。
【讨论】：
有一个非常好的 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，尽管不是每个人都想制作全屏游戏。
我希望它对某人有用。
达斯月亮
【讨论】：
启用后它可以在 iPhone (iOS 12.1.4) 上运行：
设置 -> Safari -> 高级 -> 实验功能 -> 全屏 接口
【讨论】：