处理安卓机键盘弹起导致的字体缩放及键盘顶起页面问题

58 阅读1分钟
    // 获取初始字体大小
    const originalFontSize = window.getComputedStyle(document.documentElement).fontSize;

    // 创建一个锁定字体大小的 Object.defineProperty
    Object.defineProperty(document.documentElement.style, 'fontSize', {
      get: function() {
        return originalFontSize;
      },
      set: function(value) {
        // 如果是键盘弹起导致的设置,则返回原始值
        if (window.innerHeight < window.outerHeight) {
          return originalFontSize;
        }
        // 否则允许设置新值
        this._fontSize = value;
      },
      configurable: true
    });

    // 备份原始的 resize 事件
    const originalResize = window.onresize;

    // 重写 resize 事件
    window.onresize = function(e) {
      if (window.innerHeight < window.outerHeight) {
        // 键盘弹起时,强制保持原始字体大小
        requestAnimationFrame(() => {
          document.documentElement.style._fontSize = originalFontSize;
        });
      } else if (originalResize) {
        // 键盘收起时,恢复原始 resize 处理
        originalResize.call(window, e);
      }
    };
  };

  // 初始化字体缩放处理
  if (/Android/i.test(navigator.userAgent)) {
    handleFontScale();
  }