js点击或者双击页面使其全屏，并且内容自适应

最新推荐文章于 2025-04-01 15:45:39 发布

原创最新推荐文章于 2025-04-01 15:45:39 发布

· 367 阅读

0 ·

版权

文章标签：

#javascript #全屏 #自适应

直接上代码

   const fullscreenModule = document.getElementById('scale');

   fullscreenModule.addEventListener('dblclick or click', function (e) {
        if (!document.fullscreenElement) {
            if (fullscreenModule.requestFullscreen) {
                fullscreenModule.requestFullscreen();
            } else if (fullscreenModule1.webkitRequestFullscreen) { /* Safari */
                fullscreenModule.webkitRequestFullscreen();
            } else if (fullscreenModule1.msRequestFullscreen) { /* IE11 */
                fullscreenModule.msRequestFullscreen();
            }
        } else {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.webkitExitFullscreen) { /* Safari */
                document.webkitExitFullscreen();
            } else if (document.msExitFullscreen) { /* IE11 */
                document.msExitFullscreen();
            }
        }
    });

   监听页面是否全屏
    document.addEventListener('fullscreenchange', function () {
      if (document.fullscreenElement) {
        console.log('页面已进入全屏状态');
      } else {
        console.log('页面已退出全屏状态');
      }
    });

全屏之后如果你页面的字体大小，或者div的大小没变的话，那肯定是你的布局没有用rem,百分比啥自适应的布局

最简单的方法就是，换成rem布局

html {
    font-size: 16px;
}
body {
    font-size: 1rem;
}

记住 1rem = 16px  如果你的宽是32px，那么直接写成2rem

然后当你全屏操作的时候就可以这样

 if (!document.fullscreenElement) {
        $('html').css('font-size', '29px')
    } else {
        $('html').css('font-size', '16px')
    }