我正在设计一个Web应用程序，它只需要100%的屏幕就意味着不需要滚动，这就是为什么我使用100vh。它在桌面上工作正常，但当我点击手机和平板电脑上的输入字段时，键盘打开，布局受到影响Click how its working .任何人都可以帮助我，我如何使用CSS或JS处理这种情况，这样布局也是正确的，也可以在键盘上打字。。提前感谢。
这里有一个链接click here，可以知道发生了什么。
我尝试的方法是，当输入字段处于活动状态时，正在压缩的屏幕大小将为特定设备增加250px的高度。

const documentHeight = () => {
         const doc = document.documentElement;
         const platforms = ["Android", "Linux", "arm"];
         const isAndroid = new RegExp(platforms.join("|")).test(
            window.navigator.userAgent
         );

         if (!isAndroid)
            document.addEventListener("touchmove", function (event) {
               event.preventDefault();
            });

         if (window.innerHeight < 667 && isAndroid) height = 250;
         else height = 0;

         doc.style.setProperty(
            "--doc-height",
            `${window.innerHeight + height}px`
         );
      };

      window.addEventListener("resize", documentHeight);
      let htmlTag = document.getElementsByTagName("html");
      let root = document.getElementById("root");
    {
         if (width <= 768) {
            documentHeight();
            htmlTag[0].style.position = "fixed";
            htmlTag[0].style.overflow = "hidden";
            htmlTag[0].style.width = "100vw";
         }
      } else {
         const doc = document.documentElement;
         doc.style.removeProperty("--doc-height");
      }
   });