移动设备自动缩放功能导致表单无法正常使用的问题求助

修复步骤 #

1. 修正无效的移动端媒体查询
   你当前写的@media only (phone stuff)是语法错误，完全不会触发生效，导致移动端下header的position: sticky属性始终生效，软键盘弹出后视口高度变化，sticky定位的header会一直固定在视口顶部。替换为合法的移动端断点写法即可：

/* 替换你原来的无效媒体查询 */
@media only screen and (max-width: 768px) {
  header{
    margin-right: 0;
    width: 100%;
    z-index: 1;
    position: relative;
  }
  .contact-container{
    position: relative;
  }
}

2. 新增viewport适配属性
   安卓Chromium内核浏览器软键盘弹出时默认会修改布局视口高度，导致定位元素异常，在现有viewport meta标签中添加interactive-widget=resizes-visual属性，明确指定软键盘仅调整视觉视口，不修改布局视口：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=no, interactive-widget=resizes-visual">

3. 修复堆叠上下文异常问题
   cookie层被header遮挡、form层级不生效，均是堆叠上下文规则导致：

• 给cookie通知层设置z-index: 10及以上，同时给cookie层父元素添加position: relative确保z-index生效
• 检查form的直接父元素，如果是默认的position: static，给父元素添加position: relative，form的z-index:5才会生效

4. 禁用浏览器默认表单聚焦滚动
   安卓浏览器默认会在输入框聚焦时自动滚动页面，覆盖自定义滚动逻辑，添加以下JS代码手动控制输入框聚焦滚动：

document.querySelectorAll('input, textarea').forEach(input => {
  input.addEventListener('focus', (e) => {
    // 延迟执行避免和浏览器默认行为冲突
    setTimeout(() => {
      input.scrollIntoView({
        behavior: 'smooth',
        block: 'center'
      })
    }, 100)
  })
})

5. 优化根元素布局配置
   给html、body添加以下样式，避免软键盘弹出时页面布局异常重绘：

html, body {
  height: 100%;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

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