h5全屏
有一个全屏api
requestFullscreen api地址 https://developer.mozilla.org/zh-CN/docs/Web/API/Element/requestFullScreen
通过调用这个api可以使网页全屏。但是只能是用户操作的回调里面执行才能生效。比如在点击事件中。直接调用该方法不会生效。
据说通过meta 可以设置浏览器全屏，但是我试了没有生效
<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 启用 WebApp 全屏模式 -->
完整例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Full-screen</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
.container {
width: 100%;
height: 100%;
background: grey;
display: flex;
justify-content: center;
align-items: center;
}
:-webkit-full-screen .container {
background: red;
}
.btn {
width: 300px;
height: 30px;
font-size: 16px;
}
</style>
</head>
<body>
<div class="container">
<button id="btn" class="btn">click</button>
</div>
<script>
var button = document.getElementById('btn');
// 进入全屏
function launchFullScreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
// 退出全屏
function exitFullScreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozExitFullScreen) {
document.mozExitFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
button.onclick = function () {
var isFullScreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;// 判断是否全屏
if (!isFullScreen) {
launchFullScreen(button); // 整个页面全屏
// launchFullScreen(document.getElementById("btn")); // 某个元素全屏
}
else {
exitFullScreen();
}
var fullScreenElement = document.fullscreenEnabled || document.mozFullscreenElement || document.webkitFullscreenElement; // 当前处于全屏状态的元素 element.
var fullScreenEnabled = document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitFullscreenEnabled; // 标记 fullScreen 当前是否可用.
console.log(fullScreenElement);
console.log(fullScreenEnabled)
};
document.addEventListener('fullscreenchange', function () {
});
document.addEventListener('webkitfullscreenchange', function () {
});
document.addEventListener('mozfullscreenchange', function () {
});
document.addEventListener('MSFullscreenChange', function () {
});
</script>
</body>
</html>
