HTML/CSS订阅按钮在移动端触摸屏点击无响应问题求助

• 未添加移动端视口配置元标签，移动端浏览器默认会以980px左右的桌面宽度渲染页面再缩放，导致触摸坐标和按钮实际渲染位置偏移，触摸事件无法命中按钮。
• 交互元素未配置触摸适配属性，iOS Safari等移动浏览器对存在transform动画的按钮，会出现点击事件派发异常，同时默认存在300ms触摸延迟，容易导致触摸无响应。
• 无交互状态的容器拦截触摸事件：初始状态下#email-input容器默认缩放为1、透明度为1，仅z-index比主按钮低1级，在移动端硬件加速渲染场景下容易出现层级判定异常，拦截上层按钮的触摸事件。

1. 在HTML的<head>区域添加移动端视口配置标签，保证渲染尺寸和设备尺寸一致，你写的移动端媒体查询也需要这个标签才能正常生效：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. 在CSS中添加触摸适配规则，同时禁用非激活状态容器的事件接收，避免遮挡：

/* 全局按钮触摸适配，消除300ms延迟，禁用默认点击高亮 */
button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
/* 提高主按钮层级，避免被其他元素遮挡 */
.main > #singular-form > #subs {
  z-index: 10;
}
/* 未激活的邮箱输入容器不接收触摸事件，避免拦截上层按钮点击 */
.main > #singular-form > #email-input:not(.shown) {
  pointer-events: none;
}
/* 未激活的成功提示容器同样禁用指针事件 */
.main > #singular-form > #success:not(.shown) {
  pointer-events: none;
}

3. 如果你是通过JavaScript绑定click事件实现类名切换，添加以上代码后移动端即可正常响应触摸。如果仍有偶发无响应的情况，可以给按钮额外绑定touchstart事件，触发和click事件完全相同的逻辑即可。

内容的提问来源于stack exchange，提问作者David Feudale