我正在尝试制作一个应用程序，在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();
}
这在桌面浏览器上运行良好。但在移动Safari（iOS）6上不起作用。
对于这个问题有什么想法吗？
<!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上也很好用。请注意，使用Site Point教程2012年版本的过时演示页面两次在Safari中冻结了我的iPad，我不得不重新启动iPad才能退出。
使用screenfull.js库的演示页面在我的iPad上也很好用。
无法使用全屏。如果您正确设置元标记并将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/
苹果公司的官方文档也很不错：
但总的来说，在 iOS 6.1 及以后的版本中，你无法在 iOS 设备上部署全屏的 Web 应用程序。状态栏将始终存在。
window.open(location.href, "_self").close();，但它不起作用。谢谢。 - Maxbesterhttps://developer.apple.com/reference/webkitjs/htmlvideoelement
if (elem.webkitEnterFullScreen) {
elem.webkitEnterFullScreen();
}
这对我有效。
全屏api。$('body').scrollTop(1);
webkitEnterFullscreen()
启用后，它可以在iPhone（iOS 12.1.4）上运行：
设置 -> Safari -> 高级 -> 实验性功能 -> 全屏API
有一个非常好的技巧可以模拟全屏模式，用户可以根据自己的意愿进入或离开。我真的不知道它为什么能够工作，或者它是否在其他平台上也能够工作，但在我的 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%;
}
现在是有点hacky的部分。在页面顶部给你的body加上1像素的margin。
body {
margin-top: 1px;
}
最后一件要做的事情是将您的Web应用程序内容放入一个额外的带有固定位置的div中，以便边距不会影响它。
.wrapper {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
}
完成了。旋转您的设备，看到这些丑陋的导航栏消失。非常适合真正的全屏游戏。
我相信，这可以作为一种 polyfill 使用，尽管并不是每个人都想制作全屏游戏。
我希望它对某些人有用。
Darth Moon