iOS Safari移动端网站点击输入框后无法自动缩小时的修复方案

一、阻止输入框触发放大（推荐方案） #

iOS Safari默认会在输入框字体小于16px时触发放大，直接从根源解决：

• 给所有输入类元素（input、textarea、select等）设置font-size: 16px;，系统就不会触发自动放大。
• 如果需要小字体输入框，可通过缩放实现，避免布局偏移：

.small-input {
  font-size: 16px;
  transform: scale(0.875);
  transform-origin: left top;
  width: 114.28%; /* 1/0.875，抵消缩放导致的宽度收缩 */
}

不推荐通过viewport禁用缩放（会影响用户正常缩放需求），但如果必须用，可添加属性：

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

二、离开输入框后强制恢复页面缩放 #

若无法阻止放大，用JS监听输入框失焦事件，强制重置缩放：

document.querySelectorAll('input, textarea, select').forEach(el => {
  el.addEventListener('blur', () => {
    const viewport = document.querySelector('meta[name="viewport"]');
    // 先强制锁定缩放
    viewport.setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1');
    // 延迟恢复允许缩放（可选）
    setTimeout(() => {
      viewport.setAttribute('content', 'width=device-width, initial-scale=1');
    }, 100);
  });
});

注意：这种方法可能有轻微视觉闪烁，优先用第一种方案。

额外注意事项 #

• 确保页面布局为响应式，避免固定宽度容器导致缩放后出现横向滚动。
• 测试不同iOS版本的Safari，旧版本对transform缩放的兼容性可能有差异。

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