解决移动端输入框聚焦时页面放大的问题

一、实现场景

如下图所示，在浏览器打开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以上则聚焦时页面不会放大。