canvas适配横竖屏及窗口resize时出现多余垂直滚动条问题求助

问题根源 #

• canvas默认是内联块级元素，遵循文本基线对齐规则，底部会默认预留几像素的行高留白，这就是多余滚动条的核心来源
• resize事件触发频率极高，窗口调整过程中临时出现的滚动条会挤压视口尺寸，导致反复触发计算逻辑，出现尺寸计算错乱、浏览器卡顿的问题
• 横竖屏切换触发orientationchange事件时，浏览器视口尺寸可能还未完成更新，此时获取的宽高是旧值，进一步加剧了尺寸计算错误

修复方案 #

第一步：修改CSS代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  overflow: hidden; /* 禁用全局滚动条，避免干扰容器滚动逻辑 */
}

#radarScreen {
  display: block;
  height: 100%;
  width: 100%;
  overflow: auto; /* 仅在内容超出时显示对应方向的滚动条 */
}

canvas {
  display: block; /* 取消canvas默认的内联块基线留白，消除多余滚动条 */
  background-color: #777;
}

第二步：修改JS代码（添加防抖逻辑，优化横竖屏切换的尺寸获取） #

var canvasSize = 0;
var ctx;
var canvas;
var resizeTimer = null; // 防抖定时器

function init() {
  canvas = document.getElementById('myCanvas');
  if (canvas.getContext) {
    ctx = canvas.getContext("2d");
    // 防抖处理：resize事件停止触发100ms后再执行重绘逻辑，避免频繁计算
    window.addEventListener('resize', () => {
      clearTimeout(resizeTimer);
      resizeTimer = setTimeout(resizeCanvas, 100);
    }, false);
    // 横竖屏切换后延迟执行，等待视口尺寸更新完成
    window.addEventListener('orientationchange', () => {
      setTimeout(resizeCanvas, 100);
    }, false);
    resizeCanvas();
  } else {
    alert("ERROR:  APPLICATION CANNOT RUN ON THIS DEVICE");
    return;
  }
}

function resizeCanvas() {
  let viewPortWidth = document.getElementById("radarScreen").clientWidth;
  let viewPortHeight = document.getElementById("radarScreen").clientHeight;
  let portaitMode = viewPortHeight > viewPortWidth;

  if (portaitMode) {
    console.log("portait mode ON");
    canvas.width = viewPortHeight;
    canvas.height = viewPortHeight;
  } else {
    canvas.width = viewPortWidth;
    canvas.height = viewPortWidth;
  }
  canvasSize = canvas.width;

  ctx.clearRect(0, 0, canvasSize, canvasSize);

  ctx.strokeStyle = "black";
  ctx.lineWidth = 0.2 * canvasSize;
  ctx.beginPath();
  ctx.rect(0, 0, canvasSize, canvasSize);
  ctx.stroke();

  ctx.font = "80px Arial";
  ctx.fillStyle = "red";
  ctx.textAlign = "center";
  if (portaitMode) ctx.fillText("Portrait ", canvasSize / 2, canvasSize / 4);
  else ctx.fillText("Landscape ", canvasSize / 2, canvasSize / 4);
}

HTML代码无需修改，调整后即可消除多余滚动条，同时解决窗口调整、横竖屏切换时的不稳定问题。

内容的提问来源于stack exchange，提问作者Panos Kontogiannis