H5 IOS入力にフォーカスがあるとページが上(下)に押し上げられ、キーボードを閉じるとページが下(上)に動かず、ページが拡大される不具合を解決

app.tsx で反応 / app.vue または main.js で vue

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));

入力、選択、テキストエリアと連携してフォーカスを失うぼかし

//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 はズームインおよびズームアウトするフォーカスを取得します

  <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"

 

おすすめ

転載: blog.csdn.net/weixin_46600931/article/details/129408392