要实现手机端图片“不撑破、不变形、不卡顿、不模糊”，必须同时满足viewport正确设置、父容器约束合理（如Flex/Grid中加min-width:0）、资源加载优化（srcset/sizes或picture）及canvas像素比校准，缺一不可。

直接写 img { max-width: 100%; height: auto; } 能解决 70% 的显示问题，但真正在手机上“不撑破、不变形、不卡顿、不模糊”，必须补全 viewport、父容器约束、资源加载三块拼图——漏掉任意一块，用户看到的就是横向滚动条、小字糊成一片，或等三秒才出图。

viewport 标签写错，后面全白搭

手机浏览器默认按约 980px 渲染页面，不加或写错 ，图片再怎么设 max-width 都会溢出视口。常见错误：

• 漏掉 initial-scale=1.0，iOS 上文字缩到看不清
• 写成 width=375 或 width=414，安卓机直接无视
• 动态插入（比如 Vue mounted 里 document.write），浏览器早已完成布局
• 放在 标签之后，部分 Android WebView 先按 980px 渲染再重排，闪屏明显

Flex/Grid 容器里图片死活缩不进去

max-width: 100% 在 Flex/Grid 中常失效，不是 CSS 写错了，而是容器项默认阻止收缩。关键开关是 min-width: 0 ——但它得加在父容器项上，不是图片本身：

• Flex 子项：给包裹 的
  加 min-width: 0
• Grid 子项：确保该列轨道没用 minmax(300px, 1fr) 锁死最小宽度
• 别只靠 flex-shrink: 0，那是锁死不缩，不是让它缩
• 图片自身建议加 align-self: center 防止垂直对齐错位

图片糊、加载慢、小屏文字太小，光靠 CSS 拉伸没用

CSS 只控制显示尺寸，不控制像素源。一张 2000×1200 的图硬拉到 375px 宽，仍是 2000 像素下载，模糊且耗流量：


DeepBI DHTML 页面生成器
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
下载
• 必须配 srcset 和 sizes：
• sizes 是字符串，不支持 calc()；媒体查询里空格（如 (max-width: 768px)）会让旧 Edge 直接忽略整条
• 需要裁切构图差异大时，用 ：
• object-fit 必须配合父容器明确的 width 和 height 才生效，否则等于没写

canvas 自适应比 img 更容易翻车

canvas 的 CSS 尺寸（width: 100%）和绘图尺寸（canvas.width / canvas.height）是两回事。只调 CSS，结果就是模糊或压缩：

• 监听 resize，用 canvas.getBoundingClientRect() 拿显示宽高
• 乘以 window.devicePixelRatio 设置 canvas.width 和 canvas.height
• vivo、小米等新机型屏幕宽高比多变（如 21.5:9），纯按宽度缩放会出黑边——得结合 object-fit: contain 或手动算缩放系数
• 别写 width: 50vw 这类样式，它不考虑父容器，极易撑破布局

真正卡住人的从来不是“怎么写 CSS”，而是 viewport 是否生效、父容器是否透出宽度、sizes 是否与真实布局断点一致、canvas 像素比是否校准——这些地方一错，调试时根本看不出关联。