viewport 设置不生效需检查 meta 标签写法和位置：必须放在 head 最前面，含 width=device-width 和 initial-scale=1.0，禁用 user-scalable=no 及 max/min-scale。
viewport 设置不生效？检查 meta 标签写法和位置
移动端缩放失常、布局错位，90% 是因为 没写对或没放在 最前面。必须确保它在所有 CSS 和 JS 加载前就存在，且不能被动态插入。
-
width=device-width是基础，缺了就会按桌面宽度（通常是 980px）渲染 -
initial-scale=1.0要显式写上，否则 iOS Safari 可能默认放大文本 - 避免写
user-scalable=no—— 不仅影响可访问性，还会让部分 Android 浏览器禁用双指缩放逻辑，导致可视化编辑器手势冲突 - 不要用
maximum-scale或minimum-scale，它们会干扰编辑器内元素的拖拽/缩放交互
CSS 单位选 rem 还是 vw/vh？优先用 rem + 动态根字体计算
可视化编辑器里组件尺寸、画布缩放、栅格线间距都需要稳定响应，vw 在滚动或地址栏显示/隐藏时会触发重排，px 则无法适配不同 DPR。rem 是更可控的选择。
- 用 JS 在
DOMContentLoaded后设置document.documentElement.style.fontSize，值为window.innerWidth / 375 * 16（以 iPhone 8 宽度 375px 为基准） - 所有画布容器、工具栏高度、图层缩略图尺寸统一用
rem，比如height: 4rem对应 64px（16×4） - 避免在
@media中反复覆盖 rem 基准 —— 会导致编辑器内实时预览样式跳变 - 图标、按钮内边距等小尺寸可用
px，但需配合devicePixelRatio做 1px 边框补偿（如border: 0.5px solid #ccc在 DPR=2 下才真正清晰）
触摸事件监听失效？别只绑 click，要同时处理 touchstart/move/end
可视化编辑器的拖拽、缩放、多选都依赖底层手势，纯 click 在移动端延迟高、无中间状态，且会被浏览器默认行为（如双击缩放、长按菜单）打断。
- 给画布容器加
touch-action: none，禁止浏览器接管拖拽，否则touchmove会直接被拦截 - 用
preventDefault()阻止默认行为时，只在明确需要手势响应的区域调用（比如拖动组件时），避免全局禁用导致页面无法滚动 - 区分单点操作（点击选中）和多点操作（双指缩放）：用
event.touches.length判断，不要依赖click模拟双击 - iOS 15+ 上
touchend可能比touchstart晚触发几十毫秒，建议用pointerdown/up替代（兼容性需查 caniuse）
Canvas 渲染模糊？关键在 devicePixelRatio 和 canvas.width/height 设置
可视化编辑器常用 做实时预览或矢量绘制，但直接设 style.width 会导致 DPR > 1 时图像拉伸模糊。
- 先读取
window.devicePixelRatio，再设置 canvas 的width和height属性（非 style）为clientWidth * dpr和clientHeight * dpr - 随后调用
ctx.scale(dpr, dpr)，让绘图坐标系与 CSS 像素对齐 - 每次窗口 resize 或横竖屏切换后，必须重新计算并重置 canvas 缓冲区，否则会出现半像素偏移或锯齿
- 避免在 canvas 上叠加 HTML 元素做“热区” —— 触摸坐标映射容易因缩放错位；改用
isPointInPath()或getBoundingClientRect()实时换算
适配真正的难点不在代码行数，而在于「编辑态」和「预览态」共存时，同一套 DOM/CSS/Canvas 需同时满足手势操作精度、DPR 清晰度、滚动性能三者平衡。很多团队卡在横屏下工具栏遮挡画布、或缩放后文字模糊却查不到根源，往往是因为 viewport、rem 基准、canvas 缓冲三者没同步更新。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
