车载屏幕html工具必须严格遵循语义层与dom行为双重要求：保留main/dialog等原生标签、支持aria校验、用em断点、强制图片宽高、禁用column-reverse/order、采用transform:scale()缩放，否则将导致语音失效、焦点卡死、触控不达标等安全级问题。
车载屏幕不是“大号手机”，直接套用移动端 HTML 工具会出安全级问题：语音指令失效、焦点流卡死、触控热区不达标——必须从语义层和 DOM 行为两个维度筛选工具。
必须支持 ARIA 语义结构校验的工具
车机系统（Android Auto、CarPlay、鸿蒙车机）依赖 main、dialog、aria-live 等语义标签触发语音导航与模态隔离。若工具在生成 HTML 时自动替换 main 为 div，或忽略 role="dialog" 的语义提升逻辑，则语音指令如“打开空调”会找不到目标区域。
- 检查工具输出的 DOM 是否保留原生语义标签，禁用任何“语义降级”配置项（如 Vue 的
compilerOptions.isCustomElement若误配为匹配所有带横杠的标签，会把dialog当作自定义元素剥离） - 运行时验证：在车机 WebView 中执行
document.querySelector('main')，返回 null 即不合格 - 动态插入内容后，工具是否自动补全
main.setAttribute('aria-live', 'polite')；未补全会导致语音播报被车机丢弃（超 800ms 延迟）
必须适配高 DPI 物理尺寸单位的 CSS 工具
车载屏常见分辨率为 1280×720 或 1920×720，但物理尺寸小、DPI 高（常达 200+ PPI），导致 1px 在屏幕上不足 0.2mm。用像素写死的 min-width: 320px 会让触控卡片实际宽度低于 ISO 9241-410 推荐的 24mm × 24mm 最小热区。
- 拒绝所有默认以
px为断点单位的响应式工具（如旧版 Bootstrap 4 的min-width: 576px） - 确认工具的媒体查询是否支持
em单位断点，例如@media (min-width: 80em)（对应 1280px @16px 默认字号） - 检查工具生成的 CSS 是否强制声明图片宽高（避免重排导致焦点跳变），且 SVG 是否内联、无
focusable="true"
必须禁用 flex-direction: column-reverse 和 order 的布局工具
多数车载 WebView（尤其 QtWebEngine 和旧版 WebKit）不支持 column-reverse，会导致视觉顺序与 DOM 顺序错位，方向盘旋钮焦点流直接断裂——用户按“下”却跳到顶部按钮。
- 在工具配置中关闭所有“视觉优先”的布局反转选项（如 Tailwind 的
flex-col-reverse类、CSS-in-JS 的flexDirection: 'column-reverse'） - 禁止使用
order属性调整子元素顺序；车机会按 DOM 顺序遍历，order仅影响渲染，不改变可访问性树 - 测试方法：在车机中启用屏幕阅读器，观察焦点进入容器后的首个聚焦元素是否与 DOM 第一个子节点一致
必须提供 transform: scale() 而非 rem 缩放控制的工具
车载系统常开启系统级字体缩放（如鸿蒙“显示大小”设为 120%），rem 会因 html.font-size 被覆盖而失准，导致断点偏移、边框错位。真正可靠的等比拉伸只能靠 JS 计算缩放比 + transform: scale()。
- 工具是否暴露
setScale(scaleValue)方法，且能监听resize事件自动更新容器style.transform - 验证 canvas 渲染：缩放后是否同步调整
canvas.width/canvas.height与style.width/style.height，否则图形模糊 - 避免使用
vw/vh做关键尺寸，iOS Safari 地址栏隐藏会引发视口跳变；应统一用100vh + position: fixed容器包裹
车载场景里，工具选型的致命点不在功能多寡，而在它是否默认遵循“语义即交互、DOM 即焦点、物理尺寸即触控精度”这三条铁律。任何试图用通用前端工具“微调适配”的做法，都会在真实车机上暴露不可逆的交互断裂。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
