R.C*_*.C. 13 api html5 fullscreen mobile-safari ios6
我正在尝试使应用程序在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中不起作用.
对这个问题有什么看法吗？
ndm*_*ndm 21
它不受支持......
您无法使用全屏.如果您正确设置元标记,并将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中运行，而在iPad上却不能。它似乎尚未在CanIUse上得到报道，到目前为止，我唯一发现的Apple信息是“ Safari的新功能”页面中有关iOS 12的订单项以及发行说明和一条推文：
昨天，我将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元素以触摸以退出全屏。
在Site Point上播放2014年全屏API 教程的演示页面在我的iPad上也表现良好。当心，在玩2012年版本的Site Point教程的较旧，过时的演示页面时，两次冻结了我的iPad在Safari中的浏览器，我不得不重新启动iPad才能逃脱。
在我的iPad 上，使用screenfull.js库的演示页面也可以很好地工作。
小智 5
https://developer.apple.com/reference/webkitjs/htmlvideoelement
if (elem.webkitEnterFullScreen) {
elem.webkitEnterFullScreen();
}
这个对我有用。
| 归档时间： |
|
| 查看次数： |
30940 次 |
| 最近记录： |