项目场景:
Web端项目运行的时候,我们F12打开开发者工具面板后,开始往左边拖动时,不断压缩页面的宽度,实现当控制面板拖动到一定距离的时候,让页面不再压缩,确保页面的样式不被挤压变形,而是被开发者工具面板覆盖住。
注:当页面宽度被过度挤压的时候,会使页面的布局变形错乱
解决方案:
通过JavaScript监听窗口的resize事件,并在窗口宽度小于1280px时,设置页面的最小宽度。
window.addEventListener('resize', function() {
var minWidth = 1280; // 设置最小宽度
if (window.innerWidth < minWidth) {
document.body.style.minWidth = minWidth + 'px';
} else {
document.body.style.minWidth = 'auto'; // 当窗口大于最小宽度时,恢复默认
}
});