根本原因是 viewport 未对齐设备物理像素，必须写全 并置于 head 最前，同时 canvas 需按 dpr 缩放宽高及 ctx.scale，Grid 用 auto-fill + minmax，字体与滚动条需结合 dpr 和兼容性处理。
大屏显示器（2K/4K/8K）上 HTML 模板模糊、留白、滚动条过细、鼠标坐标错位，根本不是“分辨率太高”，而是 window.devicePixelRatio 和 <meta name="viewport"> 没对齐设备物理像素——单靠媒体查询或 vw 单位无法解决。
viewport 必须写全且放最前
几乎所有大屏文字极小、横向滚动、Canvas 坐标偏移问题，都源于这行缺失或写错：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
它不是移动端专属，2K/4K 笔记本桌面端同样需要。漏掉就等于让浏览器用桌面默认宽度（如 1024px）渲染，再强行缩放到 3840×2160 区域，触发插值模糊。
-
width=device-width必须拼写准确，device_width或deviceWidth都会失效 - 别加
maximum-scale=1或user-scalable=no，除非是 Kiosk 场景；否则禁双指缩放，违反可访问性 - 必须放在
最顶部，早于所有 CSS/JS，否则 iOS Safari 可能先按错误宽度渲染再重排，造成闪屏 - 安卓 Chrome 和 Firefox 对
window.innerWidth的返回值行为不一致，没这行 meta 就没法写可靠 JS 逻辑
canvas 渲染发虚？只改 style 宽高没用
Canvas 在 4K 屏或 Windows 150% 缩放下模糊，90% 是因为只设了 canvas.style.width，却没同步放大 canvas.width 和 canvas.height。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
-
canvas.style.width控制显示大小（CSS 像素），canvas.width才是绘图缓冲区的物理像素数 - 必须同步设置：
canvas.width = Math.floor(rect.width * dpr)，canvas.height = Math.floor(rect.height * dpr)，其中rect = canvas.getBoundingClientRect() - 漏掉
ctx.scale(dpr, dpr)，所有坐标和线宽都会错位：比如画fillRect(10, 10, 1, 20)，在 DPR=2 下实际只占 0.5×10 物理像素，肉眼不可见 - 监听
resize和matchMedia('(resolution)')，窗口拖到外接显示器时resize不触发但dpr已变
Grid 布局在大屏上留白过多？别硬写 repeat(3, 1fr)
固定列数写法（如 repeat(3, 1fr)）在大屏下会强行撑开三列，导致每个格子又宽又空；小屏又会溢出。真正要的是“当前宽度下能塞几个就塞几个”。
- 推荐写法：
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) -
minmax(320px, 1fr)表示：每个格子最小 320px，最大占满可用空间的一份；浏览器自动算列数 - 必须配
gap: 16px和子项min-width: 0（防文本溢出破坏换行）才能稳定生效 - 避免嵌套 grid：不要在
display: grid容器里再套一个display: grid子容器做主布局，Android WebView 兼容差、调试困难
字体和滚动条在高分屏上太细？不能只靠 rem
纯 rem 或 vw 单位在高分屏下仍可能过小——因为它们基于 CSS 像素，而高分屏需要更多物理像素来保证点击精度和清晰度。
- 滚动条：WebKit 浏览器支持
::-webkit-scrollbar { width: 12px; }（不是 8px），Firefox 需另配* { scrollbar-width: thin; } - 字体：iOS Safari 10 以下不支持
vw用于font-size，安全方案是基础用rem+ 媒体查询微调，例如@media (min-width: 1920px) { html { font-size: 18px; } } - 若必须用动态方案（如
4.266667vw），必须加 JS fallback：document.documentElement.style.fontSize = window.innerWidth / 1920 * 16 + 'px'; - 别用
overflow: hidden掩盖问题：隐藏滚动条 ≠ 内容适配成功，可能裁剪按钮、错位图表
真正难的不是写多少媒体查询，而是把 window.devicePixelRatio 的变化感知、响应和落地，贯穿到 canvas、img、scrollbar、font-size、甚至鼠标事件坐标归一化中——漏掉任意一环，大屏上就会出现“看起来差不多，但就是不对劲”的模糊感。
