PC端兼容手持端方案

1、高度不要用百分比和vh，使用计算高度的方式，在index.html入口

<style>
      :root {
        --app-height: 100%;
      }

      html,
      body {
        margin: 0;
        height: 100vh;
        /* 基础高度 */
        height: var(--app-height);
        /* 动态高度 */
      }

      #root {
        width: 100%;
        height: 100%;
      }
</style>

　　

  // 动态计算视口高度
    function setAppHeight() {
      const doc = document.documentElement;
      // iOS特殊处理：使用window.visualViewport获取真实高度
      const height = window.visualViewport?.height || window.innerHeight;
      doc.style.setProperty('--app-height', `${height}px`);
    }

    // 初始化
    setAppHeight();

    // 处理移动端浏览器工具栏变化
    window.addEventListener('resize', setAppHeight);

2、解决IOS会缩放的问题

/*移动端字体大小，不受setRemUnit计算影响*/
@media screen and (max-width: 768px) {
  html {
    font-size: 16px !important;
  }
  /* IOS Safari在输入框字体小于16px时会自动放大页面，固定16解决该问题 */
  input, textarea {
    font-size: 16px !important;
  }
}