全屏api HTML5和Safari（iOS 6）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了全屏api HTML5和Safari（iOS 6）相关的知识，希望对你有一定的参考价值。
我正在尝试使应用程序在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中不起作用。
对这个问题有什么看法吗？
它不受支持......
您无法使用全屏。如果您正确设置元标记，并将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自己的文档也很好：
但是，简而言之，从iOS 6.1开始，您无法在iOS设备上部署全屏Web应用程序。状态栏将始终存在。
在问到这个问题六年后，“webkit” - 带有全屏的API现在似乎可以在iPad上的iOS 12.1中的移动Safari中使用，但不能在iPhone上使用。它似乎还没有在CanIUse上报道，到目前为止我发现的唯一Apple信息是关于iOS 12在"What's New in Safari" page和release notes以及tweet中的项目：
昨天，我从iOS 11.x将我的iPhone和iPad更新到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元素，以触摸退出全屏。
使用2014年全屏API demo page的tutorial at Site Point也在我的iPad上运行良好。请注意，使用2012年版本的Site Point教程中较旧的outdated demo page两次冻结我在Safari中的iPad，我不得不重新启动iPad以逃脱。
与demo page的screenfull.js library一起玩也在我的iPad上运行良好。
https://developer.apple.com/reference/webkitjs/htmlvideoelement
if (elem.webkitEnterFullScreen) {
elem.webkitEnterFullScreen();
}
这个对我有用。
以下内容滚动iOS中的状态栏。在$（document）.ready中尽早调用它
$('body').scrollTop(1);
目前该版本适用于6.x版本，但似乎无法在iOS7浏览器的测试版中使用。与往常一样，底部的浏览器工具栏是固定的。
有一个非常好的黑客来模拟全屏模式，用户可以按照自己的意愿进入或离开。我真的不知道它为什么工作或者它是否在其他平台上工作，但在我的iPhone Safari上它看起来像预期的。
然而，这种解决方案有一些局限性。它只能用于不占用屏幕空间的Web应用程序，并且用户必须在页面加载后更改为横向模式。
给你的html和身体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部分。在顶部给你的身体1px边距
body {
margin-top: 1px;
}
您要做的最后一件事是将所有Web App的内容放入一个额外的div中，其位置是固定的，这样保证金不会影响它
.wrapper {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
}
Etvoilà。旋转您的设备，看到这些丑陋的导航栏消失。适合真正的全屏游戏。
我确信，这可以作为一种polyfill以某种方式使用，虽然不是每个人都想制作全屏游戏。
我希望它对某些人有用。
达斯月亮
启用它时，它适用于iPhone（iOS 12.1.4）：
设置 - > Safari - >高级 - >实验功能 - >全屏API
@ Tom-Andraszek部分正确。 Apple最近将iPadOS与iOS分开（截至2019年初），他们只在iPad Safari上提供了对全屏api的支持，这在去年秋季（2018年）的某个时候很晚。以下是如何为您的Web应用程序实现完整的跨浏览器功能，特别是iPadOS 12.x Safari：
Going fullscreen on iPad Safari.
披露：我已经在上述链接上分享了博客文章。请注意，iPadOS上的Chrome仍然不支持全屏api，iPhone上的iOS几乎是不可能的。
以上是关于全屏api HTML5和Safari（iOS 6）的主要内容，如果未能解决你的问题，请参考以下文章
如何确定 HTML5 视频播放器何时在 iOS / iPad 上进入全屏模式？