Canvas元素在iPhone设备上仅横屏模式正常显示的问题排查

个人项目中用于绘图的Canvas元素在绝大多数设备上均可正常运行，但在iPhone设备上仅能在横屏模式下正常工作，竖屏模式下存在显示异常，暂未定位到问题根源。

基础HTML结构 #

<html>
  <body>
   <canvas></canvas>
  </body>
</html>

Canvas尺寸设置逻辑 #

const canvas = document.querySelector("canvas");
const c = canvas.getContext('2d');
canvas.width = window.innerWidth * canvasScale;
canvas.height = window.innerHeight * canvasScale;
canvas.style.width = window.innerWidth+"px";
canvas.style.height = window.innerHeight+"px";

• iOS Safari竖屏模式下window.innerHeight的取值会包含顶部地址栏、底部工具栏的动态占位高度，当浏览器UI收起/展开时这个值会动态变动，直接用该值初始化Canvas后，会出现画布实际像素尺寸和CSS显示尺寸不匹配的问题，引发内容拉伸、裁切、绘制错位。横屏模式下Safari会自动隐藏工具栏，window.innerHeight取值稳定，因此不会触发该异常
• 页面未配置视口meta标签，iOS下默认的视口缩放、适配逻辑会干扰Canvas的像素比计算
• 未监听视口动态变化事件，竖屏状态下浏览器UI变动、横竖屏切换时，Canvas尺寸不会自动修正，直接导致显示异常
• Canvas默认是行内元素，存在基线间隙，会干扰iOS下的元素高度计算

• 首先在HTML的<head>标签内添加视口配置，禁用iOS默认的页面缩放行为，开启安全区适配：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

• 替换尺寸计算基准：不要直接使用window.innerWidth/innerHeight取值，改用document.documentElement.clientWidth/clientHeight获取稳定的可视视口尺寸，规避Safari动态工具栏带来的尺寸波动
• 修正canvasScale取值逻辑：不要使用固定缩放值，直接取window.devicePixelRatio作为缩放基准，保证高DPI屏幕下画布清晰度的同时，画布实际像素尺寸和CSS显示尺寸的比例始终匹配
• 新增画布尺寸重置方法，监听resize和iOS特有的orientationchange事件，事件触发时重新计算画布尺寸并重绘内容；注意给resize回调加防抖处理，避免频繁重绘引发性能问题
• 添加全局基础样式，清除浏览器默认边距，禁止页面滚动，将Canvas设置为块级元素消除基线间隙，避免多余空间干扰尺寸计算：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
canvas {
  display: block;
}

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