Firefox安卓版输入框聚焦时异常缩放且状态锁定问题求助

可行解决方案如下： #

1. 修正viewport标签配置

你当前使用的viewport包含冗余的height参数，Firefox 94.x版本在Android 11上对该参数的解析存在兼容缺陷，会导致软键盘收起后视口参数未正常回滚。替换为以下标准配置：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

明确指定maximum-scale=1.0的优先级高于单独设置user-scalable=no，可以强制拦截Firefox的自动缩放逻辑。

2. 绑定失焦事件手动重置视口

监听输入框的失焦事件，主动触发视口参数重置和页面重绘，直接修正缩放锁定问题：

// 适配单/多输入框场景
document.querySelectorAll('input').forEach(input => {
  input.addEventListener('blur', () => {
    const viewportMeta = document.querySelector('meta[name="viewport"]');
    // 先修改content触发视口重新计算
    viewportMeta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no';
    // 主动触发resize事件强制浏览器重绘页面
    window.dispatchEvent(new Event('resize'));
  })
})

3. 添加样式规则禁用手势冲突

通过touch-action属性禁用不必要的浏览器手势触发逻辑，避免缩放逻辑被意外激活：

input {
  touch-action: manipulation;
  /* 保留你之前添加的16px字体配置 */
  font-size: 16px !important;
}

body {
  /* 仅允许上下/左右滑动，禁用双指缩放等手势的默认触发 */
  touch-action: pan-x pan-y;
}

该问题是Firefox 94.x版本在Android 11上的已知偶现BUG，根源是软键盘弹出时浏览器错误计算可视区域高度，导致视口缩放参数没有在软键盘收起后自动回滚，上述方案可以覆盖绝大多数该类异常场景。

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