移动端竖屏适配的关键是禁用浏览器自动缩放，需用，配合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+ 系列上都会被安全区吞掉。
标准骨架长这样：
<header style="flex: 0 0 auto;">@@##@@</header><main style="flex: 1 1 auto; padding: 24px;"><h1>产品名</h1>
<p>一句话卖点</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9263" title="Html2md"><img
src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="overflowclass">Html2md</a>
<p class="overflowclass">使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p>
</div>
<a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
</main><footer style="flex: 0 0 auto; padding: 16px;"><button onclick="location.href='tel:13800138000'">立即咨询</button>
</footer>
-
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 src="hero.jpg" alt="" style="max-width:90%">——首屏图必须同步加载，且要有降级。
稳妥做法：
<div style="background: #f5f5f5; position: relative; width: 100%; padding-top: 56.25%;"> @@##@@ </div>
- 用
padding-top: 56.25%（16:9）维持头图宽高比，不依赖图片加载 -
onerror直接触发父容器背景色变更，比 JS 统一监听更轻量 -
object-fit: cover确保图片裁切而非拉伸，但必须配合明确宽高容器
真要加交互，只留一个按钮就够了；多一个链接，就多一分加载失败风险。竖屏空间本就窄，留白不是浪费，是呼吸感。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
