要实现手机端图片“不撑破、不变形、不卡顿、不模糊”，必须同时满足viewport正确设置、父容器约束合理（如Flex/Grid中加min-width:0）、资源加载优化（srcset/sizes或picture）及canvas像素比校准，缺一不可。
直接写 img { max-width: 100%; height: auto; } 能解决 70% 的显示问题，但真正在手机上“不撑破、不变形、不卡顿、不模糊”，必须补全 viewport、父容器约束、资源加载三块拼图——漏掉任意一块，用户看到的就是横向滚动条、小字糊成一片，或等三秒才出图。
viewport 标签写错，后面全白搭
手机浏览器默认按约 980px 渲染页面，不加或写错 <meta name="viewport" content="width=device-width, initial-scale=1.0">，图片再怎么设 max-width 都会溢出视口。常见错误：
- 漏掉
initial-scale=1.0，iOS 上文字缩到看不清 - 写成
width=375或width=414，安卓机直接无视 - 动态插入（比如 Vue mounted 里 document.write），浏览器早已完成布局
- 放在
<link>标签之后，部分 Android WebView 先按 980px 渲染再重排，闪屏明显
Flex/Grid 容器里图片死活缩不进去
max-width: 100% 在 Flex/Grid 中常失效，不是 CSS 写错了，而是容器项默认阻止收缩。关键开关是 min-width: 0 ——但它得加在父容器项上，不是图片本身：
- Flex 子项：给包裹
<img alt="HTML图片自适应手机屏幕的方法" >的<div> 加 <code>min-width: 0 - Grid 子项：确保该列轨道没用
minmax(300px, 1fr)锁死最小宽度 - 别只靠
flex-shrink: 0，那是锁死不缩，不是让它缩 - 图片自身建议加
align-self: center防止垂直对齐错位 - 必须配
srcset和sizes：<img src="a.jpg" srcset="a-400.jpg 400w, a-800.jpg 800w" sizes="(max-width: 480px) 100vw, 50vw" alt="HTML图片自适应手机屏幕的方法" > -
sizes是字符串，不支持calc()；媒体查询里空格（如(max-width: 768px)）会让旧 Edge 直接忽略整条 - 需要裁切构图差异大时，用
<picture></picture>：<source media="(max-width: 480px)" srcset="face-crop.jpg"><img src="full.jpg" alt="HTML图片自适应手机屏幕的方法" ></source> -
object-fit必须配合父容器明确的width和height才生效，否则等于没写 - 监听
resize，用canvas.getBoundingClientRect()拿显示宽高 - 乘以
window.devicePixelRatio设置canvas.width和canvas.height - vivo、小米等新机型屏幕宽高比多变（如 21.5:9），纯按宽度缩放会出黑边——得结合
object-fit: contain或手动算缩放系数 - 别写
width: 50vw这类样式，它不考虑父容器，极易撑破布局
图片糊、加载慢、小屏文字太小，光靠 CSS 拉伸没用
CSS 只控制显示尺寸，不控制像素源。一张 2000×1200 的图硬拉到 375px 宽，仍是 2000 像素下载，模糊且耗流量：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
canvas 自适应比 img 更容易翻车
canvas 的 CSS 尺寸（width: 100%）和绘图尺寸（canvas.width / canvas.height）是两回事。只调 CSS，结果就是模糊或压缩：
真正卡住人的从来不是“怎么写 CSS”，而是 viewport 是否生效、父容器是否透出宽度、sizes 是否与真实布局断点一致、canvas 像素比是否校准——这些地方一错，调试时根本看不出关联。
