手机端变形主因是viewport标签未正确配置或图片缺失max-width:100%和height:auto；viewport须置于最顶部，且必须同时含width=device-width和initial-scale=1.0，禁用user-scalable=no等限制缩放属性。
手机端变形，八成是 viewport 标签没写对，或图片/容器没加 max-width: 100% 和 height: auto —— 这两个点漏一个，布局就大概率崩。
viewport 标签必须放在
常见错误现象：文字极小、页面能左右拖动、点击区域偏移、图片撑破屏幕。根本原因就是这个标签缺失、拼错（比如写成 viewpoint），或 content 值用了固定宽度（如 width=375）或加了 user-scalable=no。
-
width=device-width和initial-scale=1必须同时存在，缺一不可 - 不要加
maximum-scale、minimum-scale或user-scalable=no，除非是 Kiosk 场景；中老年用户依赖双指缩放，禁用等于降低可访问性 - 该标签必须静态写在
最靠前位置，不能由 JS 动态插入，也不能被构建工具覆盖（Vue/React 项目要检查最终生成的 HTML 源码） - 如果用了 SSR 或模板引擎，确保它没被重复注入两次
图片和替换元素溢出容器的硬解法
<img alt="HTML响应式模板手机端变形怎么办？屏幕兼容调整方案" >、<video></video>、<iframe></iframe> 这些替换元素默认不响应父容器尺寸，哪怕父级用了 display: flex 或 grid，也得手动约束。
- 必须同时写：
max-width: 100%+height: auto；只写前者会导致拉伸变形 - SVG 要额外加
preserveAspectRatio="xMidYMid meet"，否则在折叠屏或异形屏上可能被裁切 - 如果父容器是
grid且设了grid-template-columns: 1fr 2fr，子<img alt="HTML响应式模板手机端变形怎么办？屏幕兼容调整方案" >仍需加max-width，否则可能超出轨道宽度 - 避免用
width: 100%替代max-width: 100%——前者在父容器变窄时会强制拉伸，后者才真正保比例
rem 基准动态计算时 iOS 键盘与安卓 WebView 的坑
用 JS 动态设置 document.documentElement.style.fontSize 是主流做法，但有两个典型失效场景：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
- iOS 键盘弹出时
clientWidth不变，但视口实际被压缩，导致rem基准“虚高”，输入框被顶出屏幕；需监听focus事件临时调小font-size，blur后恢复 - 部分安卓 WebView（尤其旧系统）不触发
resize，得配合matchMedia('(min-width: 0px)')监听变化，否则横竖屏切换后样式卡死 - 媒体查询断点别按设备型号写，比如
@media (max-width: 767px)模拟 iPhone；应改用内容驱动写法：@media (min-width: 48em)（即容器 ≥ 768px），因为很多安卓平板真实宽度是 800px 或 820px
Flexbox/Grid 在老安卓上静默失败怎么识别
Android 4.4 系统 WebView（Chromium 30）对 flex-wrap、gap、grid-template-areas 支持极差，但控制台不报错，只会回退到块级流式布局——看起来像“样式丢了”，实则是底层不识别。
- 关键业务需兼容老安卓时，优先用
float+ 百分比做降级方案，或引入autoprefixer补全前缀（如-webkit-flex） - 不要依赖
display: flex后自动换行，必须显式写flex-wrap: wrap，并配min-width控制子项最小尺寸（如flex: 1 1 300px） - 检查子元素是否被
flex-shrink: 0锁死——这会导致max-width: 100%失效 - 若父容器是
display: flex，子项设width: 100%通常无效，应改用flex: 1或flex-grow: 1
最常被忽略的其实是 viewport 标签的生效时机和图片的 height: auto —— 它们不出错时一切正常，一出错就是整页变形，而且很难定位到根源。
