problem:因屏幕或文本域等太小，想扩大屏幕（全屏）
solve:
//先封装好方法
//进行切换
var fullScreenClickCount=0;
//调用各个浏览器提供的全屏方法
var handleFullScreen = function () {
var de = document.documentElement;
if (de.requestFullscreen) {
de.requestFullscreen();
} else if (de.mozRequestFullScreen) {
de.mozRequestFullScreen();
} else if (de.webkitRequestFullScreen) {
de.webkitRequestFullScreen();
} else if (de.msRequestFullscreen) {
de.msRequestFullscreen();
}
else {
wtx.info("当前浏览器不支持全屏！");
}
};
//调用各个浏览器提供的退出全屏方法
var exitFullscreen=function() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
//获取.fullscreen样式（选择器）的点击事件，再该事件中调用已封装好的方法
$(".fullscreen").click(function () {
if (fullScreenClickCount % 2 == 0) {
handleFullScreen();
} else {
exitFullscreen();
}
fullScreenClickCount++;
});
//这里仅用一个样式实现切换全屏退屏，关键点是判断浏览器实现全屏退屏的方法
完整的例子如下:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>fullscreen test</title>
</head>
<body>
<button class="fullscreen" value="全屏按钮">全屏按钮</button>
</body>
<!-- 导入jquery插件 -->
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
//进行切换
var fullScreenClickCount=0;
//调用各个浏览器提供的全屏方法
var handleFullScreen = function () {
var de = document.documentElement;
if (de.requestFullscreen) {
de.requestFullscreen();
} else if (de.mozRequestFullScreen) {
de.mozRequestFullScreen();
} else if (de.webkitRequestFullScreen) {
de.webkitRequestFullScreen();
} else if (de.msRequestFullscreen) {
de.msRequestFullscreen();
}
else {
wtx.info("当前浏览器不支持全屏！");
}
};
//调用各个浏览器提供的退出全屏方法
var exitFullscreen=function() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
$(".fullscreen").click(function () {
if (fullScreenClickCount % 2 == 0) {
handleFullScreen();
} else {
exitFullscreen();
}
fullScreenClickCount++;
});
</script>
</html>
————————————————
放大前.png
放大后.png
原文链接：https://blog.csdn.net/weixin_43467066/article/details/88977608
