Mobile Safari视口缩放问题：如何让页面自动适配且无画质损失？

1. 修正视口配置 #

你之前仅设置了initial-scale，Safari对视口参数的解析更严格，需要补充完整配置项明确视口基准与缩放规则：

const viewportMeta = document.querySelector("meta[name=viewport]");
const dpr = window.devicePixelRatio || 1;
const scale = 1 / dpr;
viewportMeta.setAttribute('content', `width=device-width, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scalable=no`);

• width=device-width让Safari明确以设备物理宽度为视口基准
• 锁定缩放范围并禁用用户缩放，避免后续操作干扰适配效果

2. 画布无损适配方案 #

编程调整画布导致画质损失，核心是没区分画布的实际像素尺寸和CSS显示尺寸，正确实现方式如下：

const canvas = document.getElementById('target-canvas');
const ctx = canvas.getContext('2d');

function adjustCanvas() {
  const dpr = window.devicePixelRatio || 1;
  // 设置CSS尺寸匹配视口大小（适配屏幕显示）
  canvas.style.width = `${window.innerWidth}px`;
  canvas.style.height = `${window.innerHeight}px`;
  // 设置实际像素尺寸为CSS尺寸×dpr（满足视网膜屏像素密度）
  canvas.width = window.innerWidth * dpr;
  canvas.height = window.innerHeight * dpr;
  // 缩放绘图上下文，后续绘制无需手动乘以dpr
  ctx.scale(dpr, dpr);
}

// 初始适配+监听窗口尺寸变化
adjustCanvas();
window.addEventListener('resize', adjustCanvas);

该方案让画布实际分辨率完全匹配视网膜屏需求，CSS尺寸适配屏幕大小，绘图上下文缩放后，可直接按逻辑像素值绘制，不会出现模糊。

3. 修复Safari初始显示异常 #

Safari有时会延迟视口计算与页面重绘，设置完视口和画布后，强制触发一次重排重绘即可：

// 在视口与画布配置完成后执行
requestAnimationFrame(() => {
  document.body.style.transform = 'translateZ(0)';
  setTimeout(() => {
    document.body.style.transform = '';
  }, 0);
});

同时确保所有适配代码在DOMContentLoaded事件触发后执行，避免DOM未加载完成时操作失效：

document.addEventListener('DOMContentLoaded', () => {
  // 此处放置视口配置、画布适配代码
});

4. 辅助CSS配置 #

清除页面默认边距，避免画布出现留白或滚动条：

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
canvas {
  display: block;
}

内容的提问来源于stack exchange，提问作者Кирилл Кузнецов