点击textarea时Android与iOS的visual viewport缩放差异及恢复问题

现象对比 #

点击textarea进入编辑状态时，Android Chrome与iOS Safari在软键盘开闭过程中，对visual viewport的影响存在明显差异：

Android Chrome 表现 #

• 初始状态：
  vvp width: 412.19049072265625，vvp height: 777.1428833007812，window.innerWidth:412，window.innerHeight:777，vvp scale:1
• 打开软键盘：
  仅vvp height与window.innerHeight变为452.19049072265625、452，其余参数保持不变
• 关闭软键盘：
  所有参数恢复至初始值

iOS Safari（iPhone 11 iOS14）表现 #

• 初始状态：
  vvp width:414，vvp height:715，window.innerWidth:414，window.innerHeight:715，vvp scale:1
• 打开软键盘：
  vvp width变为284.703125，vvp height变为311.53125，window.innerWidth变为285，window.innerHeight变为492，vvp scale变为1.454106330871582
• 关闭软键盘：
  所有参数未恢复初始状态，停留在软键盘打开时的数值

核心问题 #

iOS端关闭软键盘后，visual viewport的宽、高及缩放比例无法自动恢复至初始状态，导致页面布局异常。

解决方案思路 #

可尝试两种方向：

• CSS方案：通过配置阻止textarea触发视口缩放
• JS方案：自行编写脚本保存初始视口状态，在软键盘关闭时重置尺寸（不采用复杂方案，自行实现轻量逻辑）

测试代码 #

<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width">
    </head>
    <body style="background-color: pink">
        <div style="background-color: blue; width: 95%;">
            <textarea rows="2", cols="40" style="max-width: 100%">0123456789012345678901234567890123456789</textarea>
        </div>
        <script>
            const _handleVisualViewportChange = (_msg) => {
                console.log(_msg);
                console.log('vvp width: ', window.visualViewport.width);
                console.log('vvp height: ', window.visualViewport.height);
                console.log('window.innerWidth: ', window.innerWidth);
                console.log('window.innerHeight: ', window.innerHeight);                
                console.log('vvp scale: ', window.visualViewport.scale);
            };
            
            var _resizeCount = 0;
            window.visualViewport.addEventListener('resize', () => {
                let _msg = 'resize_count = ' + _resizeCount++;
                _handleVisualViewportChange(_msg);
            });
            
            _handleVisualViewportChange('initial values');            
        </script>
    </body>
</html>

内容的提问来源于stack exchange，提问作者SBG