如何像部分网站及Stack Overflow一样禁用移动端输入框自动缩放？

不用依赖user-scalable=no这类不推荐的viewport设置，有几个实用的方法可以解决：

• 全局CSS禁用文本自动调整
  在全局样式里添加：

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  

  这个属性会告诉iOS不要自动调整页面文本的大小，包括输入框聚焦时的缩放，而且不会限制用户手动缩放页面，完美契合你不想限制用户缩放的需求。

• 视觉缩小输入框，保持实际字号16px
  如果不想全局修改，也可以单独针对输入框处理：

  .small-input {
    font-size: 16px; /* 实际字号设为16px，避免触发缩放 */
    transform: scale(0.8125); /* 缩放比例=目标字号/16，比如13px就是13/16=0.8125 */
    transform-origin: left top; /* 确保缩放从左上角开始，布局不偏移 */
    width: calc(200px / 0.8125); /* 反向计算宽度，保持布局和目标字号一致 */
  }
  

  这种方法视觉上是你想要的小字号，但实际字号是16px，iOS就不会触发自动放大。

• 聚焦时临时切换字号（不推荐）
  给输入框添加聚焦/失焦的样式切换：

  .small-input {
    font-size: 13px;
  }
  .small-input:focus {
    font-size: 16px;
  }
  

  不过这个方法会有字号跳动的视觉变化，体验不如前两种。

你之前试的JS事件阻止默认行为没用，是因为iOS的输入框缩放是系统级触发，常规DOM事件无法拦截，CSS方法才是正解。

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