iOS端windowWidth/windowHeight失效：P5JS草图在iPhone13无法正常缩放

1. 修复iOS视口与画布基础样式 #

iOS Safari的默认视口行为常导致尺寸计算偏差，先在HTML头部添加正确的视口标签，同时强制画布样式适配：

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

canvas {
  display: block;
  margin: 0;
  padding: 0;
  width: 100vw !important;
  height: auto !important;
}

• viewport-fit=cover 是核心，解决刘海/灵动岛区域的尺寸截断问题，确保视口尺寸计算准确。
• 画布样式用width:100vw配合height:auto，固定比例下自动撑满视口宽度，同时保持最大高度显示。

2. 替换尺寸计算逻辑（避开P5的windowWidth/Height） #

iOS下P5的windowWidth/windowHeight可能返回不准确值，改用DOM API获取真实视口尺寸，再按固定比例计算画布大小：

let sketchWidth, sketchHeight;
const targetRatio = 4/3; // 替换为你的固定比例

function setup() {
  // 获取实际可用视口尺寸
  const viewportW = document.documentElement.clientWidth;
  const viewportH = document.documentElement.clientHeight;
  
  // 按固定比例计算最大适配尺寸
  if (viewportW / viewportH > targetRatio) {
    sketchHeight = viewportH;
    sketchWidth = sketchHeight * targetRatio;
  } else {
    sketchWidth = viewportW;
    sketchHeight = sketchWidth / targetRatio;
  }
  
  // 适配Retina屏幕像素密度
  pixelDensity(window.devicePixelRatio);
  createCanvas(sketchWidth, sketchHeight);
  
  // 画布居中（可选，根据需求调整）
  canvas.style.position = 'absolute';
  canvas.style.left = `${(viewportW - sketchWidth)/2}px`;
  canvas.style.top = `${(viewportH - sketchHeight)/2}px`;
}

3. 监听窗口变化，手动适配尺寸 #

iOS设备旋转或灵动岛状态切换会改变视口，添加自定义尺寸调整逻辑：

function windowResized() {
  const viewportW = document.documentElement.clientWidth;
  const viewportH = document.documentElement.clientHeight;
  
  if (viewportW / viewportH > targetRatio) {
    sketchHeight = viewportH;
    sketchWidth = sketchHeight * targetRatio;
  } else {
    sketchWidth = viewportW;
    sketchHeight = sketchWidth / targetRatio;
  }
  
  resizeCanvas(sketchWidth, sketchHeight);
  canvas.style.left = `${(viewportW - sketchWidth)/2}px`;
  canvas.style.top = `${(viewportH - sketchHeight)/2}px`;
}

4. 禁用P5自动画布创建（可选） #

如果P5默认的画布样式干扰显示，可手动创建并控制画布：

function setup() {
  noCanvas(); // 关闭自动创建画布
  // 手动创建并添加到DOM
  const canvas = createCanvas(sketchWidth, sketchHeight).elt;
  document.body.appendChild(canvas);
  // 后续样式/尺寸调整同上
}

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