如何使用jquery实现全屏问题

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" %>


    


    全屏按钮

————————————————

放大前.png

放大后.png

原文链接：https://blog.csdn.net/weixin_43467066/article/details/88977608