纯 JS 实现浏览器窗口自适应,无滚动条
以下是一种基于 JavaScript 的浏览器窗口自适应方案,可以实现不出现滚动条。具体代码如下:
window.onload = function() {
resizeWindow(); // 页面加载时调整窗口大小
window.onresize = resizeWindow; // 监听窗口大小变化事件
}
function resizeWindow() {
var body = document.getElementsByTagName('body')[0];
var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
body.style.height = height + 'px';
body.style.width = width + 'px';
}
该代码会在页面加载完成后自动调用 resizeWindow() 函数,该函数会获取当前窗口的高度和宽度,然后将 body 元素的高度和宽度设置为窗口高度和宽度,实现浏览器窗口自适应。同时,该代码还会监听窗口大小变化事件,当窗口大小发生变化时,会再次调用 resizeWindow() 函数进行调整。
需要注意的是,该代码可能会影响页面布局和样式,需要根据实际情况进行调整和优化。
原文地址: https://www.cveoy.top/t/topic/nBY1 著作权归作者所有。请勿转载和采集!