问题

在移动端项目，我们常遇到的一个问题：用户点击输入框时，页面会不期望地发生自动缩放，这既打断了用户的输入流程，也影响了整体的用户体验。

我们的目标是优化这一行为，确保用户在点击输入框时，页面能够保持稳定，仅允许用户专注于内容的输入，从而提升产品的可用性和满意度。

解决前后效果对比

方案

针对移动端点击输入框导致页面自动缩放的问题，我们需要根据不同操作系统（主要是安卓与iOS）采取差异化的解决方案。

安卓：通常可以通过在HTML文档头部设置viewport的meta标签，并明确指定minimum-scale、maximum-scale和user-scalable属性的值来有效防止页面缩放。这种方法能够确保用户输入时，页面保持稳定的视图比例。

iOS：仅仅依靠设置meta标签的某些值往往不足以解决问题。iOS的Safari浏览器有其独特的页面缩放行为，尤其是在处理输入框时。

为了解决这个问题，我们可以采用JavaScript编写一个封装函数，该函数在页面加载完成后自动执行。该函数的核心逻辑可以是通过监听输入框的聚焦（focus）和失焦（blur）事件，动态地调整页面的缩放级别或利用CSS样式来阻止不必要的缩放行为，从而实现在iOS环境下用户输入时页面保持稳定的用户体验。

安卓解决方式：

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

//在移动浏览器上页面渲染是在一个叫viewport的页面绘制区域内
"viewport"
// 设置layout viewport 的宽度，为一个正整数，使用字符串”width-device”表示设备宽度
 content="width=device-width,
// 设置页面的初始缩放值，为一个数字，设置值为1.0
 initial-scale=1.0,
//允许用户的最小缩放值，为一个数字，设置值为1.0
 minimum-scale=1.0,
//允许用户的最大缩放值，为一个数字，设置值为1.0
 maximum-scale=1.0,
//是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许
user-scalable=no"/>

iOS解决方式：

注意

如果是web-view渲染的H5，经测试用第一种方式就行，两端都可以兼容。