用语义化html结构（如section+aria-label）、可注入状态的data属性、独立span控制倒计时、progress进度条替代css动画、带etag缓存与超时降级的fetch策略、微信环境使用时效性呼叫链接或dialog降级，确保可访问、可维护、零依赖。
如何用纯 HTML + CSS 实现可落地的打车等待页
不能只靠 <div> 堆样式，得让司机端和乘客端真正能识别状态、支持刷新、不闪屏。核心是：结构语义化 + 动态状态可注入 + 静态资源零依赖。
<p>典型错误是把整个页面写成一张大图或用 <code>position: absolute 死扣像素，结果适配安卓小屏时司机头像被切掉、倒计时错位、甚至 aria-live 区域没声明导致视障用户无法感知接驾进度。
实操建议：
- 用
<section role="region" aria-label="接驾状态区"></section>包裹倒计时和车辆信息，确保读屏软件可访问 - 司机头像用
<img>而非背景图，并设置alt="司机张师傅，驾龄5年"，避免加载失败时空白 - 倒计时数字用独立
<span class="countdown-digit"></span>标签包裹，方便后续用 JS 精确控制单个数字翻转（而非整段重渲染） - 车辆信息行必须包含
data-car-number="粤B·D12345"和data-driver-phone="138****5678"属性，供原生 App WebView 注入逻辑调用
为什么不能直接用 CSS 动画做“车辆驶来”效果
看似炫酷的 SVG 车辆沿路径移动动画，在低端安卓机上极易掉帧，且无法与真实 GPS 进度同步——你动画播到 70%，实际司机还在 2.3 公里外，用户会误判。
更稳妥的做法是用静态进度条 + 文字状态切换，把动态逻辑交给 JS 控制：
- 进度条用
<progress value="35" max="100"></progress>，语义清晰、自带无障碍支持 - 文字状态分三级：
"司机已出发"/"距离您约1.2公里"/"预计30秒后到达"，每条都带data-status="on_way"便于埋点 - 禁止用
@keyframes模拟车辆移动；如需视觉反馈，改用transform: translateX()配合 JS 实时计算偏移量（基于真实距离插值）
fetch() 轮询接驾状态时怎么避免被节流或 429
前端每 5 秒 fetch("/api/order/status?order_id=abc123")，看似合理，但真实场景下常触发网关限流——尤其早晚高峰，同一 IP 下多个 Tab 同时轮询。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
关键不是调得更慢，而是让请求“可合并、可降级、可缓存”：
- 加
cache: "no-cache"和headers: { "X-Request-Purpose": "ride-waiting" }，方便后端区分流量优先级 - 首次请求后，用
response.headers.get("ETag")缓存比对，未变更则跳过 DOM 更新（省掉无意义的innerHTML操作） - 连续 3 次超时或 429，自动退化为 30 秒轮询，并在页面右下角显示
<div class="warning-toast">网络稍慢，状态将延后更新</div> - 务必在
AbortSignal.timeout(8000)内终止请求，防止 pending 请求堆积阻塞主线程
微信内嵌 WebView 下点击“联系司机”没反应？
不是 JS 写错了，是微信屏蔽了 tel: 协议的自动唤起——尤其 iOS 微信，<a href="tel:138****5678"></a> 点击后静默失败，连 console 都不报错。
真实可用方案只有两个：
- 用
location.href = "weixin://wap/pay?prepayid=xxx"类似思路不可行，微信已废弃所有非支付类私有协议；唯一保留的是openAddress和openCustomerServiceChat，但需提前配置公众号客服 - 正确做法：服务端生成带时效的临时呼叫链接（如
https://yourdomain.com/call?token=xyz&expire=1699999999），前端跳转后由服务端 302 重定向到tel:或唤起微信语音通话（需接入微信客服消息 API） - 降级方案：点击后弹出含司机号码的
<dialog></dialog>，并提示“长按号码可复制”，同时监听document.execCommand("copy")是否成功，失败则手动聚焦输入框模拟复制
最易被忽略的是：所有电话类交互必须在用户手势（click/tap）回调中触发，跨 Tick 的 setTimeout 或 Promise.then 里调用 location.href 会被浏览器拦截。
