一、实现场景
如下图所示，在浏览器打开H5页面或使用模拟器打开时页面可以正常显示，但在手机上打开页面，当聚焦到输入框时，页面会放大，部分页面内容超出屏幕，需手动缩小，如何实现在手机上聚焦输入框时，不会放大页面？
首先，需要理解为什么页面会放大。
这是因为手机浏览器中的聚焦输入框会触发浏览器的缩放功能，以便用户更清楚地看到输入框里的内容并进行输入。
当输入框被聚焦时，浏览器会自动将页面缩放到适当的比例，以便输入框可以占据较大的视觉空间。这种自动缩放的行为是浏览器的默认功能，我们可以通过调整 viewport 的 meta 标签来控制缩放的行为。
二、解决方法
1、设置meta标签
通过设置meta标签来限制页面的放大缩小，设置 minimum-scale=1.0, maximum-scale=1.0，限制页面只能1.0倍，并设置 user-scalable=no，不允许用户手动缩放。
| 参数 | 说明 |
|---|---|
| viewport | 表示可视区域 |
| width | 可视区域的宽度，值可为数字或关键词device-width（设备的宽度） |
| initial-scale | 初始的缩放比例 （范围从>0到 10 ） |
| minimum-scale | 允许用户缩放到的最小比例 |
| maximum-scale | 允许用户缩放到的最大比例 |
| user-scalable | 用户是否可以手动缩放 |
| apple-mobile-web-app-capable | 表示苹果工具栏和菜单栏，默认content为no，即显示工具栏和菜单栏。设置将content设置成yes即为不显示 |
tips：参照以上参数说明表进行meta设置如下
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
2、设置输入框 font-size
给输入框设置比页面的 font-size 更大的值， 比如页面设置font-size: 14px，输入框需设置font-size: 14.5px以上则聚焦时页面不会放大。