不加viewport标签，页面在手机上会默认按980px渲染，导致文字过小、按钮点不准；必须写，其中width=device-width匹配设备逻辑宽度，initial-scale=1.0禁用初始缩放，user-scalable=no虽防误操作但损害可访问性，建议改为yes或省略。
用 viewport 元标签控制初始缩放
不加这行，页面在手机上会默认按 980px 宽度渲染，文字小得看不清，按钮点不准。必须在 里写死：
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
注意三点：
• width=device-width 是核心，让视口宽度匹配设备物理宽度
• initial-scale=1.0 防止 iOS Safari 自动缩放
• user-scalable=no 虽然能防误操作，但会损害可访问性，上线前建议改成 yes 或直接删掉
Flexbox 实现「顶部标题 + 中间内容 + 底部按钮」结构
移动端活动页最常见三段式布局，别用 float 或 position: absolute，它们在不同机型上错位风险高。直接给 或外层容器加 Flex：
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
然后用 flex: 1 让中间区域撑满剩余空间：
立即学习“前端免费学习笔记（深入）”；
-
<header></header>：固定高度，比如height: 60px -
<main></main>：加flex: 1，自动填满中间空白 -
<footer></footer>：固定高度，比如height: 56px（适配 iOS 底部安全区）
这样即使内容很少，按钮也不会“飘”在半空；内容很长时，也能自然滚动。
图片和按钮尺寸别写死 px
写 width: 300px 在 iPhone 15 Pro 上可能占满屏幕，在 Pixel 7 上只占一半。改用相对单位：
- 图片宽度统一用
max-width: 100%+height: auto，防止溢出 - 按钮高度用
rem（比如height: 2.25rem），配合根字体大小适配 - 关键间距（如按钮上下边距）用
vh或vw，比如margin-top: 4vh比20px更稳
特别注意：iOS Safari 对 vmin/vmax 支持不稳定，慎用；rem 需确保 html 根元素字体大小已设为 16px（默认值），否则计算会偏移。
下拉菜单或弹窗定位失效？检查父容器的 overflow
很多活动页在安卓 WebView 里点开弹窗就“消失”，不是 JS 没触发，而是父级容器写了 overflow: hidden。一旦子元素用了 position: absolute（比如下拉菜单、抽奖转盘遮罩层），就会被裁掉。
排查路径：
- 打开 Chrome DevTools 连真机，选中弹窗元素，看它是否被某个父级
<div> 的 <code>overflow: hidden截断 - 临时删掉该父级的
overflow声明，确认是否恢复显示 - 修复方式：要么把弹窗挂到
body下（用 JS 动态appendChild），要么把overflow: hidden换成overflow: visible并靠z-index控制层级
这个坑在微信内置浏览器和旧版 Android WebView 中尤其高频，但错误信息不会报在控制台里，只能靠 DOM 检查。
