HTML模板在平板显示异常的主因是viewport标签缺失或断点设置错误；必须添加<meta name="viewport" content="width=device-width, initial-scale=1.0">并置于head最前，断点应采用min-width渐进增强，配合flex布局与响应式图片方案。
HTML模板在平板上显示错位、文字过小或侧边栏消失，通常不是因为没写媒体查询，而是 viewport 标签缺失或断点设置反了——width=device-width 没加，或者用了 @media (max-width: 768px) 却把平板当“小屏”处理，结果平板反而套进手机样式里。
viewport meta 标签必须放在 <head> 最前面
这是所有响应式生效的前提。没有它，iOS 和 Android 浏览器默认以约 980px 宽度渲染页面，@media 规则根本不会触发。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">是最低要求，不能省略width=device-width - 别加
maximum-scale=1.0或user-scalable=no，会破坏可访问性，且 iOS 双击缩放失效 - 该标签必须出现在所有 CSS
<link>或<style>之前，否则部分浏览器（尤其是旧版 Safari）可能忽略 - 检查方式：用 Chrome DevTools 切换 iPad Pro 模拟器，右上角 Elements 面板显示的 viewport 宽度应为 1024（横屏）或 768（竖屏），而不是 980
平板断点别硬套 768px，优先用 min-width + 内容驱动
平板不是统一尺寸，iPad Air 竖屏是 820px，Surface Pro 是 1080px，直接写 @media (max-width: 768px) 会让很多平板落在“无样式区间”。更可靠的是移动优先 + 渐进增强。
- 基础样式（手机）不写媒体查询，直接设
width: 100%、flex-direction: column、font-size: 1rem - 平板起始断点建议从
@media (min-width: 768px)开始，覆盖竖屏 iPad、大屏安卓平板 - 再加一层
@media (min-width: 1024px)处理横屏平板和小桌面，比如让侧边栏display: block、主内容区设max-width: 1200px - 断点值不要来自设备列表，而来自你自己的布局：拖动浏览器窗口，当卡片开始挤成三列、导航栏文字换行、表单字段并排显得太窄时，那个宽度就是你的断点
Flexbox 布局中 flex-basis 比 width 更可控
用 width: 33.33% 做三列，在平板上常因 padding/margin/border 导致换行；而 Flexbox 的 flex 属性能自动协调剩余空间。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
.grid-item { flex: 1 1 280px; min-width: 280px; }—— 允许拉伸收缩，基础宽度 280px，最小不小于 280px - 避免
flex: 0 0 33.33%，它禁止拉伸，在平板横屏下留白严重 - 对表单控件统一设
width: 100%，但父容器要用display: flex; flex-direction: column;控制堆叠顺序，而不是靠 float 或 inline-block - 注意 IE11 兼容：不用
flex: 1简写，拆成flex-grow: 1; flex-shrink: 1; flex-basis: 0;
图片和字体在平板上容易被忽略的两个坑
平板屏幕像素密度高（如 iPad Pro dpr=2），但 viewport 宽度仍是 CSS 像素（1024px），固定 px 字体或未设 srcset 的图会显得模糊或撑出容器。
- 字体别用
font-size: 16px，改用font-size: 1rem，并在@media (min-width: 768px)中微调根字号：html { font-size: 18px; } - 图片必须加
max-width: 100%; height: auto;，否则在竖屏平板上可能溢出容器 - 关键 banner 图用
<picture>+<source media="(min-width: 768px)" srcset="banner-tablet.jpg">，避免手机加载大图 - 慎用
vw单位做字体：在 iPad 横竖屏切换时，10vw可能从 102px 突变到 76px，阅读体验断裂
真正卡住人的往往不是“怎么写”，而是“为什么写了没反应”——先确认 <meta name="viewport"> 是否存在且位置正确，再查断点是否匹配当前 viewport 宽度（不是设备物理宽度），最后看 flex 容器有没有意外被 white-space: nowrap 或 overflow: hidden 干扰了换行逻辑。
