嵌入式工业触摸屏需禁用缩放并锁定DPI，viewport设width=800及user-scalable=no等参数；字体用px单位，正文14–16px；触摸目标硬编码min-width/min-height=48px；DOM深度≤4层，禁用display:contents。
嵌入式工业触摸屏（如 1024×600、800×480 的 ARM Linux + QtWebEngine 或 Chromium Embedded Framework 环境）不是普通手机浏览器，viewport 行为异常、CSS 渲染管线受限、DOM 深度容忍度更低——直接套用移动端响应式模板大概率导致触控失灵、文字模糊、布局错位。
viewport 设置必须显式禁用缩放且锁定 DPI 比例
工业屏常无标准 DPR（Device Pixel Ratio），浏览器可能错误报告 window.devicePixelRatio === 1，但实际物理像素密度不一致。若仅写 <meta name="viewport" content="width=device-width, initial-scale=1">，部分 CEF 版本会触发强制重绘抖动，导致 touchstart 延迟飙升。
- 必须补全
user-scalable=no, minimum-scale=1.0, maximum-scale=1.0，否则用户误触缩放手势会卡死渲染线程 - 对固定分辨率屏（如 800×480），优先用
width=800而非device-width——后者在某些定制内核中返回错误值 - 加
shrink-to-fit=no（Safari 旧版兼容项，部分 CEF 分支仍依赖）
正确写法：<meta name="viewport" content="width=800, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
字体单位必须用 px，禁用 rem/vw 在工业屏上做响应式排版
rem 依赖 document.documentElement.style.fontSize 动态计算，而工业屏 JS 执行环境常被降频或内存限制，getComputedStyle 返回值不稳定；vw/vh 在低版本 WebKit 内核中解析精度丢失严重（如 1vw 实际渲染为 0.8px），导致文字断裂或换行错乱。
立即学习“前端免费学习笔记（深入）”；
- 正文统一用
font-size: 14px~16px（经实测，低于 14px 在 800×480 屏上可读性骤降） - 标题可用
font-size: 18px/20px，禁止使用calc(1rem + 2px)类动态表达式 - 行高固定为
line-height: 1.5（无单位），避免 font-size 变化时连锁重排
触摸目标尺寸必须硬编码 min-width/min-height，不能依赖 CSS 缩放
工业屏常运行在 1x 缩放模式下，transform: scale(0.75) 或 zoom 会劣化点击区域判定逻辑——WebKit for Embedded 里 getBoundingClientRect() 返回值未按缩放校准，导致 touchstart 坐标映射偏移。
- 所有可点元素（
<button>、<a>、自定义div[role="button"]）必须设min-width: 48px和min-height: 48px - 禁用
padding+font-size推算尺寸，改用绝对像素控制（例如：按钮内边距设padding: 12px 16px，而非0.75rem） - 图标按钮需额外包裹
span并设display: inline-block; width: 48px; height: 48px;，防止 SVG 尺寸塌陷
DOM 深度必须 ≤ 4 层，且禁用 display: contents
工业屏 JavaScript 引擎（如 V8 8.x 或 JSC 13.x）事件冒泡路径解析慢，DOM depth > 4 时 touchstart 到达绑定节点平均延迟超 60ms，已超出人机工效学容忍阈值（
- 用 Chrome DevTools → Elements 面板右键任意节点 → “Show DOM properties” 查看
depth，超过 4 必须扁平化 - 删掉所有仅为加 class 而存在的
<div>包裹层，改用直接给语义标签加 class（例如：<article class="panel">而非<div><article>） -
display: contents在 QtWebEngine 5.15+ 才稳定支持，旧设备会渲染空白，一律禁用
真正卡住工业屏响应的，从来不是“要不要响应式”，而是把消费端那一套弹性计算逻辑，原封不动搬进资源受限、内核陈旧、DPI 不明的封闭环境里——像素就是像素，1px 就该是 1 物理像素，少玩花活。
