问题

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

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

解决前后效果对比

方案

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

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

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

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

安卓解决方式：

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

复制 1
 2<meta name="viewport"
 3
 4
 5 content="width=device-width,
 6
 7// 设置页面的初始缩放值，为一个数字，设置值为1.0
 8 initial-scale=1.0,
 9
10//允许用户的最小缩放值，为一个数字，设置值为1.0
11
12 minimum-scale=1.0,
13
14//允许用户的最大缩放值，为一个数字，设置值为1.0
15 maximum-scale=1.0,
16
17//是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许
18user-scalable=no"/>

iOS解决方式：

复制 1<script>
 2    
 3    window.onload = function () {
 4
 5        
 6
 7        
 8        document.addEventListener('gesturestart', function (e) {
 9            e.preventDefault();
10        });
11
12        
13        document.addEventListener('dblclick', function (e) {
14            e.preventDefault();
15        });
16
17        
18        document.addEventListener('touchstart', function (event) {
19            if (event.touches.length > 1) {
20                event.preventDefault();
21            }
22        });
23
24        
25        
26        var lastTouchEnd = 0;
27        document.addEventListener('touchend', function (event) {
28            var now = (new Date()).getTime();
29            
30            if (now - lastTouchEnd <= 300) {
31                event.preventDefault();
32            }
33            lastTouchEnd = now;
34        }, false);
35    };
36
37</script>

注意

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