iFrame 未在 iOS 设备上填充屏幕-解网

问：

我正在尝试让 iframe 填满 Android 和 iOS 设备上的整个屏幕。我的代码在 Android 上运行良好，但在 iOS 上，iframe 停在屏幕中间的某个位置。

这是我的代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />

    <title>Cryptie</title>
  </head>
  <style>
    /*:root {
      --app-height: 100%;
    }*/

    html,
    body {
      padding: 0;
      margin: 0;
      overflow: hidden;
      width: 100vw;
      height: 100vh;
      /*height: var(--app-height);*/
    }
    body {
      position: fixed;
      height: 100%;
      min-height: calc(100vh-70px);
      /* mobile viewport bug fix */
      min-height: -webkit-fill-available;
    }

    iframe {
      position: relative;
      width: 100%;
      height: 100%;
    }
  </style>
  <body>
    <iframe
      src="FIXIE_API"
      allow="clipboard-write"
    ></iframe>
    <!-- <script>
      const appHeight = () => {
        const doc = document.documentElement;
        doc.style.setProperty("--app-height", `${window.innerHeight}px`);
      };
      window.addEventListener("resize", appHeight);
      appHeight();
    </script> -->
  </body>
</html>

它在设备上的外观

我尝试了几种解决方案，包括使用视口高度、内联样式、固定定位和 JavaScript 来调整高度，但它们似乎都无法始终如一地工作。iframe 有时会填满屏幕，但在重新加载后会回到中间。任何帮助将不胜感激。谢谢！

JavaScript HTML CSS iOS

iFrame 未在 iOS 设备上填充屏幕

iFrame Not Filling Screen on iOS Devices

评论