直接上代码
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')
}