WKWebView如何在iPad上显示2360x1640尺寸的HTML5 Canvas？

1. 调整Canvas的CSS显示尺寸 #

保持Canvas的实际绘图缓冲区尺寸（width/height属性）为2360x1640，同时通过CSS将其显示尺寸适配WKWebView的视口：

canvas {
  width: 100vw;
  height: 100vh;
  /* 或固定匹配视口的CSS像素尺寸 */
  /* width: 1180px; height: 820px; */
}

这样Canvas的高清绘图数据会被完整缩放到视口内显示，不会出现裁切。

2. 配置正确的视口Meta标签 #

在HTML的<head>中添加视口配置，确保WKWebView正确识别设备像素比：

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

如果是全屏场景，可追加viewport-fit=cover，避免安全区域留白影响显示。

3. 适配绘图上下文的缩放逻辑 #

为了保证Canvas绘制内容清晰，可根据设备像素比（DPR）调整绘图上下文的缩放比例：

const canvas = document.getElementById('target-canvas');
const ctx = canvas.getContext('2d');
const dpr = window.devicePixelRatio || 1;

// 保持Canvas的物理像素尺寸
canvas.width = 2360;
canvas.height = 1640;

// 缩放上下文，确保绘制内容适配DPR
ctx.scale(dpr, dpr);

// 后续绘图直接使用CSS像素坐标即可，上下文会自动转换为物理像素
ctx.fillRect(0, 0, canvas.width / dpr, canvas.height / dpr);

4. iOS端WKWebView原生配置调整 #

如果是原生iOS开发的WKWebView，确保WebView的frame铺满屏幕，并可注入脚本辅助适配：

let webView = WKWebView(frame: view.bounds)
let fitScript = """
document.querySelector('canvas').style.width = '100%';
document.querySelector('canvas').style.height = '100%';
"""
webView.evaluateJavaScript(fitScript)

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