H5移动端-解决点击输入框时页面自动放大的问题

#问题

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

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

#解决前后效果对比

#方案

针对移动端点击输入框导致页面自动缩放的问题，我们需要根据不同操作系统（主要是安卓与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"/>

复制
<meta name="viewport"


 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解决方式：

复制<script>
    
    window.onload = function () {

        

        
        document.addEventListener('gesturestart', function (e) {
            e.preventDefault();
        });

        
        document.addEventListener('dblclick', function (e) {
            e.preventDefault();
        });

        
        document.addEventListener('touchstart', function (event) {
            if (event.touches.length > 1) {
                event.preventDefault();
            }
        });

        
        
        var lastTouchEnd = 0;
        document.addEventListener('touchend', function (event) {
            var now = (new Date()).getTime();
            
            if (now - lastTouchEnd <= 300) {
                event.preventDefault();
            }
            lastTouchEnd = now;
        }, false);
    };

</script>

#注意

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