viewport meta标签必须写对，否则高分屏失效；需满足width=device-width、initial-scale=1且禁用maximum-scale/user-scalable=no，须为head中首个meta标签。
viewport meta 标签必须写对，否则高分屏直接失效
医疗设备常使用 2K/4K 诊断屏（如 PACS 工作站），但 viewport 写错会让整个布局崩塌。不是“加了就行”，而是必须满足三个硬条件：width=device-width、initial-scale=1、且不能含 maximum-scale 或 user-scalable=no——后者会锁死医生双指缩放查看病灶细节的操作。
常见错误：width=device_width（下划线错成下划线）、content="width=375"（写死像素值）、或把 viewport 放在 <link> 后面导致闪屏重排。它必须是 中第一个 meta 标签。
用 rem + JS 动态基准适配不同 DPI 医疗屏
单纯设 html { font-size: 16px } 在 100% 缩放的 4K 屏上文字小得看不清；而只靠媒体查询断点（比如 @media (min-width: 1920px)）又无法区分同分辨率但 DPR 不同的设备（如 Windows 125% 缩放 vs macOS 默认缩放）。
实操建议：
- 用 JS 读取
window.devicePixelRatio和screen.width，动态设document.documentElement.style.fontSize，例如：按 1x DPR 下 1rem = 16px，2x 下 1rem = 32px - 关键 UI 元素（如按钮、表单控件、DICOM 图像容器）全部用 rem 定义尺寸和间距，避免混用 px
- 字体大小不建议直接用 vw，iOS Safari 8–10 不支持，而部分老旧 PACS 终端仍跑这类内核
Flex/Grid 在医疗屏上要绕开老 WebView 的坑
很多医院终端用的是定制 Android 系统（如基于 Android 4.4 的 PACS 客户端），其 WebView 基于 Chromium 30，不支持 gap、flex-wrap: wrap-reverse、grid-template-areas，一用就白屏或错位。
安全做法：
- Flex 布局只用
display: flex、flex-direction、flex-basis这些稳定属性 - Grid 仅用于现代浏览器环境（如 WebApp 模式），老终端降级为 float + 百分比布局
- 所有弹性容器加
min-width: 0防止子项溢出（尤其 DICOM 元数据表格列宽计算异常）
图片和 DICOM 视图容器必须用 max-width + object-fit
医疗图像（JPEG2000、PNG、甚至 base64 编码的 DICOM 像素数据）在高分屏上容易被拉伸变形或溢出容器，单纯 max-width: 100% 不够。
正确组合：
-
img, .dicom-viewer canvas都加max-width: 100%; height: auto; - 对固定宽高的视图容器（如 512×512 DICOM 切片区域），用
object-fit: contain保持比例居中，而非cover（会裁切病灶） - 避免用 background-image 显示诊断图像——无法精确控制缩放锚点，且不支持右键另存
真正难的不是写响应式代码，而是确认你写的每行 CSS 是否能在放射科那台连着 DICOM 网络、运行着定制内核的 32 寸 4K 显示器上，既看清肺结节边缘，又不卡顿拖拽窗宽窗位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
