处方详情页应使用语义化html结构：以包裹整体，置顶编号日期，三分设患者信息、药品清单（用定义列表，药名、拆分剂量与频次）、医师签名（文字优先+透明图），单位用，打印样式需重置布局/颜色/分页，移动端禁缩放并优化字体与行展示，缓存须带时效校验且敏感字段需混淆。
处方详情页该用什么 HTML 结构才符合语义和可访问性
直接用 <div> 套来套去，屏幕阅读器会读成“一堆没名字的容器”，药名、用法、医师签名这些关键信息容易被跳过。必须用语义化标签明确内容角色。
<p>核心结构按医疗信息逻辑组织：<code><article></article> 包整个处方，<header></header> 放处方编号/日期，<section></section> 分“患者信息”“药品清单”“医师签名”三块，每块用 <h2></h2> 标题。药品列表必须用 <dl></dl>（定义列表）：每个 <dt></dt> 是药名，<dd></dd> 是规格、用法、用量——比表格更轻量，比纯段落更易被辅助技术识别。
- 避免把剂量写成“1片 bid”，应拆成
<dd class="dose">1</dd> <dd class="frequency">每日2次</dd>，方便后续加 aria-label 或做响应式折叠 - 医师签名区域别用图片替代文字，至少保留
<p class="prescriber">张伟 主治医师</p>，再叠一层透明签名图（aria-hidden="true"） - 所有剂量单位（如“mg”“mL”）必须用
<abbr title="毫克">mg</abbr>，否则语音朗读会念字母
电子处方要打印，CSS 怎么写才不丢内容或错行
浏览器默认打印时会砍掉背景色、浮动元素、overflow: hidden 内容，而处方里常见的红色“处方”水印、右对齐的医师签名、药品表格的横向滚动条，全都会失效。
关键是在 @media print 里重置三类东西：布局、颜色、分页。用 display: block 强制所有 <section></section> 垂直堆叠；用 color: #000 !important 覆盖所有蓝色链接和灰色提示；对药品列表加 page-break-inside: avoid 防止某一行药被切到下一页。
- 绝对定位的“处方”水印必须改用
::after伪元素 +position: fixed，否则打印时完全消失 - 签名栏如果用了
flex右对齐，打印时得补一句justify-content: flex-end到@media print里，否则退回左对齐 - 禁止在打印样式里用
vh/vmax单位，打印机不认视口单位，会导致内容溢出或留白过大
怎么让手机上看处方详情不缩放、不横滚、关键信息一眼可见
用户常在微信里点开链接看处方，但默认 viewport 设置会让字体小到看不清“0.25g”这种剂量，或者左右拖拽才能看完一整行药品。
必须强制禁用缩放（user-scalable=no），同时用 viewport-fit=cover 适配 iPhone X+ 的刘海屏。字体大小不能只设 px，主内容用 rem 基于 的 font-size，并在 @media (max-width: 480px) 里把根字号提到 16px 起步。
- 药品名称和剂量必须分两行显示：用
white-space: pre-line替代nowrap，既防折行又保换行 - “用法”字段（如“口服，餐后”）建议加
background: #eef7ff; padding: 2px 6px; border-radius: 3px，比纯文字更易扫视 - 微信内置浏览器对
position: sticky支持差，想固定顶部处方号，得用 JS 监听 scroll 并手动 toggle class，别依赖 CSS
为什么用 localStorage 缓存处方数据反而导致过期信息被展示
很多前端直接把接口返回的处方 JSON 存进 localStorage，下次打开页面就读缓存——但医生可能刚修改了用法，用户看到的还是两小时前的旧剂量。
缓存必须带时间戳和校验。存的时候记下 lastModified 时间，每次加载先比对服务端返回的 updated_at 字段；若本地时间早于服务端，就清掉缓存并重新拉取。更稳妥的做法是只缓存非关键字段（如患者姓名、性别），而药品清单、用法、医师签名这类高变数据，一律设为“不缓存”或最多缓存 30 秒。
- 别用
localStorage.setItem('prescription', JSON.stringify(data))硬存，改用封装函数cachePrescription(data, { expires: 30000 }) - 微信里
localStorage在 iOS 上可能被系统清理，关键处方页首次加载必须允许降级到网络请求，不能卡在“读缓存失败”白屏 - 如果处方含敏感字段（如诊断结果），
localStorage明文存储有风险，至少用atob()简单混淆，别裸存
处方详情页真正的难点不在布局，而在信息时效性、多端渲染一致性、以及医疗场景下对“不可错”的隐性要求——比如 0 和 O、l 和 1 这类字符，在小字号打印时必须用等宽字体隔离，否则发药环节可能出事。
