Chrome 在 iPhone 上溢出空白页面上的内容（仅在新选项卡上，不重新加载）

Question

在 IOS Chrome 上，正文在没有内容的新选项卡或页面上溢出，但如果重新加载页面，问题已解决。它对位于底部（绝对或固定）的任何元素造成问题。这是重现问题的代码：

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,minimum-scale=1, maximum-scale=2, initial-scale=1">
      <meta name="apple-mobile-web-app-capable" content="yes">
      <style>* {
         box-sizing: border-box;
         }
         html{
          height:100%;
         }
         body {
          height:100%;
          background-color:yellow;
          margin:0 0;
          border: 30px solid red;
         }
      </style>
   </head>
   <body></body>
</html>

边框应显示在整个视口周围，但隐藏在底部导航栏后面。这是上面代码的结果：

我尝试过的方法（none 有效）：

按照此处所述删除“width=device-width”： Empty HTML5 page still overflows and trigger scroll bars on mobile.
使用 JS 重新加载页面。当用户手动而非以编程方式刷新页面时，问题已解决。
使用transform放大缩小强制刷新

我已经尝试了一个星期来寻找解决方法，但无济于事。任何帮助将不胜感激

编辑：我的问题与 HTML body not filling complete width on mobile devices 不同，因为我没有填充正文的问题，我有溢出的正文问题和移动设备 chrome 在新页面上的行为不同与现有页面相对。页面上的解决方法对我的问题不起作用

我的问题如下：有人可以找到一种使用 css 或 JS 使 HTML 正文在使用上面的代码打开新页面时不会溢出的方法吗？

Answer 1

WebKit 处理 100% 高度有点奇怪，您需要为 WebKit 设备使用前缀为属性的供应商：

body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}
html {
  height: -webkit-fill-available;
}

Source

Answer 2

这是同一个问题的重复，问题是相同的，只是提问方法不同。

这是之前问过的同一个问题，正确答案中的细节也解释得很好。

这将帮助您了解您面临的问题是什么。

Answer 3

我已经重现了您的问题并且可能找到了解决方案。我发现 this，我认为这会导致您的问题：

[...] The core issue is that mobile browsers (I’m looking at you, Chrome and Safari) have a “helpful” feature where the address bar is sometimes visible and sometimes hidden, changing the visible size of the viewport. Rather than adjusting the height of 100vh to be the visible portion of the screen as the viewport height changes, these browsers instead have 100vh set to the height of the browser with address the address bar hidden. The result is that the bottom portion of the screen will be cut off when the address bar is visible, thus defeating the purpose of 100vh to begin with.

文章建议

One way to get around this issue is to rely on javascript instead of css. When the page loads, setting the height to window.innerHeight will correctly set the height to the visible portion of the window. If the address bar is visible, then window.innerHeight will be the height of the full screen. If the address bar is hidden, then window.innerHeight will be the height of just the visible portion of the screen, as you’d expect.

在评论中，他们建议将内部高度存储在 CSS 变量中，每次触发事件 resize 或 orientationchange 时刷新它并将其应用于 html 和正文标签。在我的测试中，仅部分起作用。使用 target="_blank" 从 link 访问页面工作正常，但刷新或直接访问页面会显示您在通过 link 访问页面时描述的问题。为了解决这个问题，我还在 load 事件期间更新了变量。在我的 iPhone 6s 和最新的 Chrome 应用程序上，通过 link 或直接访问页面现在似乎工作正常。我希望这就是您要找的：

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1, maximum-scale=2, initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <style>
      * {
        box-sizing: border-box;
      }

      html,
      body {
        height: 100%;
        height: 100vh;
        height: calc(var(--vh, 1vh) * 100);
      }

      body {
        background-color: yellow;
        margin: 0 0;
        border: 30px solid red;
      }
    </style>
  </head>

  <body></body>

  <script>
    function fixHeight() {
      document.documentElement.style.setProperty('--vh', `${window.innerHeight / 100}px`);
    };

    addEventListener('load', fixHeight);
    addEventListener('resize', fixHeight);
    addEventListener('orientationchange', fixHeight);
  </script>

</html>

Answer 4

我找到的关于绝对定位的解决方案 - 在 iOS 上的 Chrome 中，window.innerHeight 似乎以全屏高度初始化，然后切换到地址栏和底部工具栏之间的高度不久之后（大约 100 毫秒左右）。在我的例子中分别是 667px 和 553px。

如果以编程方式将 window.innerHeight 传递到应用程序父元素的高度中，使应用程序的高度与内部高度相同，同时给顶部元素 position: relative;, 该元素的所有样式为 position: absolute; 的子元素的位置都将相对于该父元素，而不是网页。

它没有解决内容下方有多余高度的问题，但它解决了绝对定位。

HTH.

Chrome 在 iPhone 上溢出空白页面上的内容（仅在新选项卡上，不重新加载）

Chrome on iPhone overflows content on empty page (on new tab only, not reload)

html

javascript

css

webkit

chrome-ios