Solve the bug that when the H5 IOS input is focused, the page is pushed up (down), and the page is not moved down (up) when the keyboard is closed, and the page is zoomed in

react in app.tsx / vue in app.vue or main.js

window.onload = function () {
  /iphone|ipod|ipad/i.test(navigator.appVersion) &&
    document.addEventListener(
      'blur',
      (event) => {
        // 当页面没出现滚动条时才执行，因为有滚动条时，不会出现这问题
        // input textarea 标签才执行，因为 a 等标签也会触发 blur 事件
        if (
          document.documentElement.offsetHeight <= document.documentElement.clientHeight &&
          ['input', 'textarea'].includes(event.target.localName)
        ) {
          document.body.scrollIntoView(); // 回顶部
        }
      },
      true,
    );
};
window.scrollTo(0, 0);
window.scrollTo(0, Math.max(document.body.clientHeight, document.documentElement.clientHeight));

Cooperate with Input, select, textArea to lose focus onBlur

//publicFC 公共方法文件
export const onBlurInput = () => {
    console.log('失去焦点')
    let u = navigator.userAgent,
      app = navigator.appVersion;
    let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
    if (isIOS) {
      setTimeout(() => {
        const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
        window.scrollTo(0, Math.max(scrollHeight - 1, 0));
      }, 200);
    }
  };
//----------------------------------
import { onBlurInput } from '@/utils/publicFC';
//例如select
    <Select
      onBlur={onBlurInput}
    />
//例如input
    <Input
      onBlur={onBlurInput}
    />

Input, select, textArea get the focus to zoom in and zoom out

  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"