iOS Safari 中设备旋转后页面底部出现空白

Question

我有一个带有元标记的网站

<meta name="viewport" content="width=device-width, initial-scale=1.0">

height:100%;

和

html

 标签上的

和

body

。

当我从 Safari (iOS 13.5.1) 访问此网站并执行以下操作时：

将我的设备旋转到横向模式
然后将其旋转回纵向模式

然后屏幕底部会出现一个空白区域。该空间不是页面 html 代码的一部分。它位于

html

标签之外。

最小可重现示例：https://jsbin.com/cojabiquza

这似乎与 Safari 在设备进入横向模式时隐藏地址面板和底部面板的行为有关。当它返回到纵向模式时，面板会再次显示，但浏览器“忘记”重新计算某些内容并在页面底部显示额外的空间。

删除

<meta name="viewport"...

即可解决该问题。但我无法摆脱它，因为我有一个响应式网站。在其他浏览器中它运行良好。

如果您知道如何解决，请分享您的经验。

Answer 1

@Jax-p回答对于我描述的错误有效，但它会导致另一个问题。当您使用

100vh

时，内容开始隐藏在地址栏后面：

所以在我现实生活中的应用程序中，我最终遇到了一堆黑客：

document.addEventListener('orientationchange', () => {
  document.documentElement.style.height = `initial`;
  setTimeout(() => {
    document.documentElement.style.height = `100%`;
      setTimeout(() => {
        // this line prevents the content
        // from hiding behind the address bar
        window.scrollTo(0, 1);
      }, 500);
  }, 500);
});

这个 hack 或多或少修复了 iOS Safari 12 和 13 中的问题

Answer 2

在花了大半天的时间（再次）处理这个“功能”之后，我为 iPad、iPhone 上的 iOS 14.4 创建了一个纯 CSS 的解决方案，并且可以在所有常规浏览器上正常工作。无需黑客攻击。秘诀是在 HTML 和 BODY 元素上使用 100vh，同时在最外面的包装元素上使用

position:fixed

，并将所有边缘钳位为零。

注意：如果您的 BODY 背景与包装背景有任何不同，则旋转屏幕时会出现视觉伪影。同样的问题还允许您通过有目的地为 BODY 提供不同的背景颜色（可选）来为顶部的地址栏着色。

HTML, BODY {
    height: 100%;
    width: 100%;
    height: 100vh;
    width: 100vw;
    margin:0;
    padding:0;
    /* required to prevent rogue scrollbars */
    overflow: hidden;
    /* cosmetic stuff: */
    background-color:#5AE;
}
#wrapper {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    padding:0;
    margin:0;
  /* if you want the content to scroll normally: */
  overflow: auto;
    /* cosmetic stuff: */
    background-color:#AEA;
    border: #6B6 1em solid;
    box-sizing:border-box;
}

<html>
<head>
    <meta name="viewport" content="height=device-height, initial-scale=1, width=device-width, initial-scale=1" />
</head>
<body>
    <div id="wrapper">
        Content goes here.
    </div>
</body>
</html>

Answer 3

移动浏览器通常会在您滚动时隐藏其地址栏和控制菜单（或者在某些情况下当您从纵向更改为横向时）。使用

height: 100%;

时可能会导致一些问题，因为有时浏览器不会以正确的方式重新计算百分比值（它不会对地址栏高度求和）。

如果您想填充 100% 的视口高度，您应该使用

height: 100vh;

（vh = 视口高度）。我希望它有帮助。

Answer 4

试试这个：

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

Answer 5

当我也在寻找这个问题的解决方案时，我发现了这篇博客文章，其中包含以下解决方案：

window.onresize = function() {
    document.body.height = window.innerHeight;
}
window.onresize(); // called to initially set the height.

Answer 6

这个解决方案在 iPhone 15 上非常适合我

@media (max-width: 799px) {

  main {
    overflow-x: clip;
    overflow-y: auto;

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0;
    margin: 0;
  }
  
  }

iOS Safari 中设备旋转后页面底部出现空白

问题描述投票：0回答：6

6个回答

最新问题

iOS Safari 中设备旋转后页面底部出现空白

问题描述 投票：0回答：6

6个回答

最新问题

问题描述投票：0回答：6