Html 全屏 api HTML5 和 Safari (iOS 6)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12822739/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Full screen api HTML5 and Safari (iOS 6)
提问by R.C.
I'm trying to make an application to run in full screen mode (without the top bar) in Safari for iOS 6. The code is as follows:
我正在尝试使应用程序在 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();
}
It works well on desktop browsers. But in Mobile Safari (iOS) 6 does not work.
它在桌面浏览器上运行良好。但在 Mobile Safari (iOS) 6 中不起作用。
Any idea about this issue?
对这个问题有什么想法吗？
回答by ndm
回答by Adam Davis
You can't use the full screen. If you set the meta tags correctly, and put the web app on the home screen, then you can get rid of all the safari cruft, but you're still left with the iOS status bar (connectivity, clock, battery).
你不能使用全屏。如果您正确设置元标记，并将 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" />
There are a number of resources for this, here's the one I've been using:
这方面有很多资源，这是我一直在使用的资源：
http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/
http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/
Apple's own documentation is good as well:
Apple 自己的文档也很好：
But, in short, you cannot, as of iOS 6.1, deploy a full screen web app on iOS devices. The status bar will always be present.
但是，简而言之，从 iOS 6.1 开始，您不能在 iOS 设备上部署全屏 Web 应用程序。状态栏将始终存在。
回答by Slack Undertow
Six years after this question was asked..., the "webkit"-prefixed fullscreen API now seems to work in mobile Safari in iOS 12.1 on an iPad, but not on an iPhone. It doesn't seem to be reported yet at CanIUse, and the only Apple information I've found so far are line items regarding iOS 12 in the "What's New in Safari" pageand release notesand a tweet:
在提出这个问题六年后......，“webkit”前缀的全屏 API 现在似乎可以在 iPad 上的 iOS 12.1 中的移动 Safari 中运行，但不能在 iPhone 上运行。CanIUse似乎还没有报告，到目前为止，我发现的唯一 Apple 信息是“Safari 中的新功能”页面中有关 iOS 12 的行项目以及发行说明和推文：
Yesterday, I updated my iPhone and iPad to iOS 12.1 from iOS 11.x. The full screen API is working for me in Safari on the iPad but not the iPhone. On the iPad, "alert(document.fullscreenEnabled)" displays "undefined", but "alert(document.webkitFullscreenEnabled)" displays "true". On the iPhone, both display "undefined".
昨天，我将 iPhone 和 iPad 从 iOS 11.x 更新到了 iOS 12.1。全屏 API 在 iPad 上的 Safari 中对我有用，但不适用于 iPhone。在 iPad 上，“alert(document.fullscreenEnabled)”显示“undefined”，但“alert(document.webkitFullscreenEnabled)”显示“true”。在 iPhone 上，两者都显示“未定义”。
Playing with the following script, I'm able to display in full screen mode in Safari on the iPad.
使用以下脚本，我可以在 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>
Upon displaying in full screen, Safari on the iPad inserts an "X" UI element in the upper left corner to touch for exiting full screen.
iPad上的Safari在全屏显示时，会在左上角插入一个“X”的UI元素，点击即可退出全屏。
Playing with the demo pageof a 2014 full screen API tutorial at Site Pointworked well on my iPad also. Beware, playing with the older, outdated demo pageof the 2012 version of the Site Point tutorial twice froze my iPad in Safari, and I had to reboot the iPad to escape.
在 Site Point上玩2014 年全屏 API教程的演示页面也适用于我的 iPad。请注意，使用2012 版 Site Point 教程的旧的、过时的演示页面在 Safari 中两次冻结我的 iPad，我不得不重新启动 iPad 才能逃脱。
Playing with the demo pageof the screenfull.js libraryworked well on my iPad too.
在我的 iPad 上使用screenfull.js 库的演示页面也很有效。
回答by May Peng
https://developer.apple.com/reference/webkitjs/htmlvideoelement
https://developer.apple.com/reference/webkitjs/htmlvideoelement
if (elem.webkitEnterFullScreen) {
elem.webkitEnterFullScreen();
}
It works for me.
这个对我有用。
回答by Victor
The following scrolls the status bar in iOS out of the way. Call it early in your $(document).ready
下面滚动 iOS 中的状态栏。在 $(document).ready 中尽早调用它
$('body').scrollTop(1);
This works in up to version 6.x at the moment but doesn't appear to work in the beta version of iOS7's browser. As always, the browser toolbar at the bottom is fixed.
这目前适用于 6.x 版，但似乎不适用于 iOS7 浏览器的测试版。与往常一样，底部的浏览器工具栏是固定的。
回答by Darth Moon
There is a really nice hack to emulate fullscreen mode and the user can enter or leave it as he is willing to. I really have no clue why it is working or whether it is working on other platforms at all, but on my iPhone Safari it looks like expected.
有一个非常好的 hack 来模拟全屏模式，用户可以根据自己的意愿进入或离开它。我真的不知道为什么它可以工作，或者它是否可以在其他平台上工作，但在我的 iPhone Safari 上它看起来像预期的那样。
Nevertheless, this solution has some limitations. It can only be used for Web Apps which do not use more space than the screen can offer, and the user has to change to landscape mode after the page has loaded.
然而，这种解决方案有一些局限性。它只能用于不使用比屏幕提供的更多空间的 Web 应用程序，并且用户必须在页面加载后更改为横向模式。
Give your html and body 100% height and width
给你的 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%;
}
Now the hacky part. Give your body 1px margin at the top
现在是hacky部分。在顶部给你的身体 1px 的边距
body {
margin-top: 1px;
}
The last thing you have to do is putting all your Web App's content into an extra div with position fixed so that the margin won't affect it
您要做的最后一件事是将所有 Web 应用程序的内容放入一个额外的 div 并固定位置，这样边距就不会影响它
.wrapper {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
}
Et voilà. Rotate your device and see these ugly navigation bars disappear. Perfect for real fullscreen games.
等等。旋转您的设备，就会看到这些丑陋的导航栏消失了。非常适合真正的全屏游戏。
I am sure, this can be used as a polyfill somehow, although not everybody want to make a fullscreen game.
我敢肯定，这可以以某种方式用作 polyfill，尽管不是每个人都想制作全屏游戏。
I hope it will be useful for somebody.
我希望它对某人有用。
Darth Moon
达斯月亮
回答by Marvin Danig
@Tom-Andraszek is partially correct. Apple has separated iPadOS from iOS lately (as of early 2019) and they came up with support for fullscreen api on the iPad Safari only, sometime late during the fall last year (2018). Here is how you can implement a full cross-browser functionality for your web app and in particular cover iPadOS 12.x Safari:
@Tom-Andraszek 部分正确。苹果最近（截至 2019 年初）将 iPadOS 与 iOS 分开，并且他们在去年秋季（2018 年）的某个时候仅在 iPad Safari 上提供了对全屏 api 的支持。以下是如何为您的网络应用程序实现完整的跨浏览器功能，尤其是 iPadOS 12.x Safari：
Going fullscreen on iPad Safari.
Disclosure: I have written the blogpost shared on the aforementioned link. Note that Chrome on iPadOS still doesn't support the fullscreen api and iOS on iPhones is pretty much out of question.
披露：我已经写了在上述链接上共享的博客文章。请注意，iPadOS 上的 Chrome 仍然不支持全屏 api，而 iPhone 上的 iOS 几乎是不可能的。
回答by Tom Andraszek
It works on iPhone (iOS 12.1.4) when you enable it:
当您启用它时，它适用于 iPhone (iOS 12.1.4)：
Settings -> Safari -> Advanced -> Experimental Features -> Fullscreen API
设置 -> Safari -> 高级 -> 实验性功能 -> 全屏 API
