首屏3秒内必须完成价值确认并正确设置viewport。文案需复现广告关键词，可信标识要直接可见，cta按钮须动词开头；viewport必须写全且charset放在head最前；flex布局需父容器设display:flex，避免float和错误绝对定位。
首屏3秒内必须完成价值确认，否则用户直接划走
广告点击进来的用户不会等，前3秒没看到“这页是为我准备的”，就走了。不是页面美不美，而是他一眼认出核心诉求是否匹配。
关键动作有三件：<h1></h1>文案必须复现广告里的关键词，比如广告写“小程序免备案”，<h1></h1>就不能泛写“智能推广平台”；可信标识要直接可见——人社部备案号、真实客户头像+一句话证言，比“服务10万+企业”有力十倍；主CTA按钮必须动词开头：立即领取、马上试用、免费生成，禁用了解更多。
-
<header></header>里至少含一个可识别品牌标识（logo 或带字号的品牌文字），不能只靠颜色或字体暗示 - 首屏禁止出现二级导航、无关链接、社交媒体图标——这些留到第二屏再加载
- 可信标识别堆在右上角小图标里，它得和CTA在同一视觉区块，用户扫一眼就能建立信任
用 flex 布局做响应式结构，父容器不加 display: flex 就白搭
移动端适配出问题，90%是因为 flex 没生效。子元素写了 flex: 1，但父容器没设 display: flex，样式完全不触发。
推荐统一写法：<header></header>、<main></main>、<footer></footer> 这类主区块都加 display: flex; flex-direction: column;；需要水平居中 logo + 标题时，给 <header></header> 加 justify-content: center; align-items: center;；侧边栏固定宽、内容区自适应？侧边栏设 flex: 0 0 240px，内容区设 flex: 1; min-width: 0（防长 URL 撑破）。
- 绝对定位只用于悬浮按钮、加载遮罩等脱离文档流的元素
- 用
position: absolute必须配合position: relative的父容器，否则 iOS 和部分安卓机型会错位 - 别碰
float—— 它在现代单页里已无必要，且兼容性差
viewport 元标签写错，整个移动端首屏就废
很多落地页在手机上只显示一半文字、按钮缩成针尖大小，根源不在 CSS，而在 <meta name="viewport"> 缺失或参数不全。iOS Safari 会自动缩放，安卓部分浏览器直接拒读，屏幕阅读器也受影响。
必须写全这一行：</meta name="viewport" content="width=device-width, initial-scale=1.0">。漏掉 initial-scale=1.0，页面就会被强制缩小；禁止写 user-scalable=no——它会让辅助工具失效，还可能触发某些浏览器的兼容降级。
-
<meta charset="UTF-8">必须放在最前面，否则中文标题可能乱码 - 检查方法：Chrome DevTools → 切换设备模拟 → 看地址栏是否显示“缩放已禁用”或页面被强制缩小
- 不要依赖 JS 动态注入 viewport，它必须是 HTML 解析第一阶段就存在的硬声明
单页跳转与数据加载要轻量，别让 fetch 拖慢首屏
推广页不是 SPA，不需要整套路由系统。锚点跳转足够用：scrollIntoView 是最稳方案，比手写动画或第三方库更可控。
示例中 scrollToQR() 函数调用 document.querySelector('.qr-section').scrollIntoView({behavior: 'smooth'})，简洁可靠；统计类异步请求（如调用 https://52o.ink/StepApi/stats.php）建议设兜底超时（AbortSignal.timeout(5000)），失败时不阻塞渲染，也不抛错到控制台干扰调试。
- 避免在
window.onload里塞多个 fetch，改用Promise.allSettled统一处理，失败不影响其他模块 - 每30秒轮询更新数据可以，但首次加载必须设 loading 占位符，防止空白闪烁
- 二维码区域建议预加载图片，别等 scroll 到才
fetch，否则用户滑到那儿还要等
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
