移动端HTML输入框完成输入后为何无法自动恢复缩放？

这是一个8年前旧问题的重复，但原问题无有效答案，仅有的评论指向无关的“完全阻止放大”的问题。

我制作了一个极简测试页面，通过BrowserStack验证后确认：所有主流移动端平台及浏览器都存在这个浏览器默认设计的问题——点击字号为1rem的小型数字输入框时，会弹出数字键盘，同时visualViewport.scale值增大，页面自动放大聚焦输入框；但完成输入、关闭键盘后，页面仍保持放大状态，不会自动恢复。

有没有办法实现关闭键盘后页面自动恢复缩放？我知道用户可以通过捏合手势手动恢复，但既然放大是自动触发的，完成输入后理应自动缩小才合理。

我是程序员而非网页设计师，正在搭建项目的测试/演示页面，对响应式设计尤其是移动端网页设计了解有限。我发现增大输入框字号可以避免自动放大，但现有页面在各设备上显示效果良好，还能适配屏幕旋转，除非万不得已不想修改字号。我已经使用rem和em作为字体单位，未使用px，实际页面的字体比测试页面更大，可读性没问题。之前对viewport元标签的尝试也未取得成效。

后续测试发现的方案方向 #

• 要在所有设备上避免自动放大，页面字体大小需至少为35px（以16px基准换算约为2.2rem），其中iOS平台的Safari和Chrome对最小字号要求最高。
• 或者将viewport的min-scale值设置为至少0.9（iOS要求最高，安卓Chrome设置0.55即可）。我的页面字号为1.1025rem（即17.64px），因此需要设为0.9而非1.0：

  <meta name="viewport" content="min-scale=0.9"/>
  

• 仅在安卓Chrome中，以下设置可阻止自动放大：

  <meta name="viewport" content="interactive-widget=overlays-content"/>
  

调整最小字号或缩放比例需要大幅修改现有布局，35px的最小字号实在过大。目前没有找到能在键盘收起后自动恢复缩放的方法，避免自动放大似乎是解决这个笨拙UI问题的唯一途径。

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