核心是控三件事：表单语义结构不垮、viewport与字体缩放不翻车、关键交互在真机不掉链子；form必须写对action和method，input必设name，date/number需加min/max/step，viewport须完整且rem需JS动态计算，所有校验必须后端兜底并真机实测。
直接用 HTML + CSS 做响应式活动报名页，核心不是套模板，而是控制三件事：表单语义结构不垮、viewport 和字体缩放不翻车、关键交互（日期/人数/提交）在真机上不掉链子。
form 标签必须写对 action 和 method，否则点提交等于没点
很多本地测试时“点不动”的问题，根源就在这儿。浏览器看到 <form></form> 但没 action，就当它是个摆设；写了 action="/apply" 却没后端路由，一提交就 404；只写 action="apply.php" 这种相对路径，在微信 WebView 里常因 base URL 错乱而请求错地址。
-
method必须显式写method="POST"：报名含姓名、手机号等敏感字段，GET会把数据拼进 URL，既不安全又易被截获 -
name属性一个都不能少：后端靠这个取值，<input name="phone">有效，<input id="phone">提交时根本不会发过去 - 本地调试可暂用
action="#"，但务必加onsubmit="return false;"，否则页面会跳转或刷新，掩盖 JS 错误
date 和 number 输入框不加 min/max/step 就是裸奔
<input type="date"> 和 <input type="number"> 浏览器原生支持，但默认完全不限制范围。用户能选去年的日期、输 -999 人、粘贴 “abc123” 进数字框——这些都会被提交，后端第一道校验压力陡增。
- 日期必须加
min="2026-10-20"（格式严格为 YYYY-MM-DD），iOS Safari 15.4+ 才支持，旧版本会退化为文本框，得配 JS 检查valueAsDate - 人数必须写全：
<input type="number" name="count" min="1" max="50" step="1">，漏掉step="1"会导致用户点箭头输入 1.0000000001 这类非整数值 - 别信
required能拦住非法值：它只判断是否为空，不验证1是不是合法人数、2020-01-01是不是过期日期
viewport 和 rem 自适应不能二选一，得看交付场景
活动页上线后在 iPhone 上文字小得看不见、左右滑动才能看完，90% 是 <meta name="viewport"> 写错了；而 PC 端打开一片空白或布局炸开，往往是 rem 计算逻辑和容器宽度没对齐。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- viewport 必须写完整：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">，缺initial-scale=1.0就等于没写 - 用 rem 方案时，
的font-size必须用 JS 动态算：设计稿宽 750px，就按document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';算，别写死 100px - 用 viewport 缩放方案（设
width=750），所有外层<div class="page"> 必须显式写 <code>width: 750px，否则 PC 浏览器无视 viewport，直接按视口宽度撑开type="email" 和 pattern 正则只是体验补丁，后端校验不可绕过
前端加了
type="email"和pattern="^1[3-9]\d{9}$"，用户在 Chrome 里输错会标红，但关掉 JS、用 curl 发请求、或改 DOM 的type值，这些限制瞬间失效。见过太多案例：前端显示“邮箱格式正确”，后端收到的是test@@example.com或admin@，验证码发不出去。-
type="email"唯一可靠作用是 iOS/Android 键盘自动弹出 @ 符号，别指望它做业务校验 -
pattern要配title属性，否则报错提示是浏览器默认英文，用户看不懂 - 真正要拦的，是空值、明显非法字符（如邮箱缺 @）、长度超限（手机号非 11 位）、以及服务端查重（同一手机号重复报名）
最常被忽略的一点：所有校验逻辑（包括 JS 实时联动、防重复提交、按钮禁用）必须在真机微信、QQ、钉钉内嵌 WebView 中跑一遍。模拟器里完美，真机上键盘弹起遮挡输入框、fixed 定位错位、甚至
inputmode不生效，都是上线前才发现的硬伤。 -
