移动端竖屏适配的关键是禁用浏览器自动缩放，需用<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">，配合flex单列布局、vmin字体单位及图片降级方案。
移动端竖屏适配的关键不是加 meta，而是先砍掉默认缩放
直接给 <meta name="viewport" content="width=device-width, initial-scale=1"> 不够。很多页面写了这行但依然横滚、文字糊、按钮点不准——根本原因是浏览器默认会把桌面级布局强行“缩放”进竖屏，而 initial-scale=1 只是禁止用户双指缩放，没关掉 UA 自动缩放逻辑。
真正起效的写法是：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
重点在 maximum-scale=1 和 user-scalable=no：前者锁死缩放上限，后者禁用双指手势（对极简页反而更稳）。iOS Safari 尤其吃这一套；Android Chrome 也认。
- 别用
width=375或具体像素值——设备宽度千差万别，device-width才是真实物理视口 - 删掉所有
min-width、max-width的全局容器限制，让 body 原生撑满 - 如果用了
rem单位，确保根字体大小基于document.documentElement.clientWidth动态算，而不是固定html { font-size: 16px; }
极简结构只留三块：头图 + 文案 + 按钮，且必须用 flex 布局
不用 grid，不用绝对定位，不用 float——移动端竖屏下最稳的是单列 flex 流式。任何用 position: absolute 固定底部按钮的写法，在 iPhone X+ 系列上都会被安全区吞掉。
立即学习“前端免费学习笔记（深入）”；
标准骨架长这样：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<body style="display: flex; flex-direction: column; min-height: 100vh; margin: 0;">
<header style="flex: 0 0 auto;"><img src="hero.jpg" alt="" style="width: 100%; display: block;"></header>
<main style="flex: 1 1 auto; padding: 24px;">
<h1>产品名</h1>
<p>一句话卖点</p>
</main>
<footer style="flex: 0 0 auto; padding: 16px;">
<button onclick="location.href='tel:13800138000'">立即咨询</button>
</footer>
</body>
-
min-height: 100vh是底线，但必须配合flex-direction: column才能撑满全屏 -
flex: 0 0 auto控制头图和按钮不拉伸，flex: 1 1 auto让文案区域吸走剩余空间 - 按钮用
onclick直接跳tel:或https:，避免 JS 加载失败导致不可点
字体和间距必须用 viewport 单位，别碰 px/em
px 在不同 DPR 屏幕上渲染模糊，em 依赖父级继承容易失控。竖屏极简页唯一靠谱的是 vmin 和 vh。
比如标题字号写成 font-size: 5.5vmin;，意思是“取视口宽高较小值的 5.5%”，iPhone SE（375×812）下约 20px，iPad Pro（1024×1366）下约 56px，自动适配不溢出。
- 正文用
1.8vmin～2.2vmin，比rem更直觉，且无需 JS 监听 resize - 行高统一设
line-height: 1.4（无单位），避免vmin导致行距过小 - 内边距用
padding: 3vmin 5vmin;，外边距全清零，靠 flex 容器控制间距
图片加载失败时，纯色占位比 loading 图更可靠
竖屏页首屏只有头图，网络慢或 CDN 故障时，空白比 loading 动画更致命。别用 <img loading="lazy">——首屏图必须同步加载，且要有降级。
稳妥做法：
<div style="background: #f5f5f5; position: relative; width: 100%; padding-top: 56.25%;">
<img src="hero.jpg"
alt="产品主视觉"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block;"
onerror="this.parentElement.style.background='#e0e0e0'">
</div>
- 用
padding-top: 56.25%（16:9）维持头图宽高比，不依赖图片加载 -
onerror直接触发父容器背景色变更，比 JS 统一监听更轻量 -
object-fit: cover确保图片裁切而非拉伸，但必须配合明确宽高容器
真要加交互，只留一个按钮就够了；多一个链接，就多一分加载失败风险。竖屏空间本就窄，留白不是浪费，是呼吸感。
