在iOS Safari中旋转设备后页面底部的空白 [英] White space at page bottom after device rotation in iOS Safari

问题描述

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

<元名称=视口"content ="width = device-width，initial-scale = 1.0&";>

和 height:100％; 在 html 和 body 标记上.

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

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

，然后在屏幕底部出现一个空白区域.此空间不是页面html代码的一部分.它在 html 标记之外.

最小的可复制示例:

因此，在我的现实生活应用中，我最终遇到了一堆骇客:

  document.addEventListener('orientationchange'，()=> {document.documentElement.style.height =`initial`;setTimeout(()=> {document.documentElement.style.height =`100％`;setTimeout(()=> {//此行阻止内容//从地址栏后面隐藏window.scrollTo(0，1);}，500)；}，500)；}); 

此hack或多或少地解决了iOS Safari 12和13中的问题

I have a website with a meta tag

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

and height:100%; on html and body tags.

When I access this site from Safari (iOS 13.5.1) and do the following:

• rotate my device to the landscape mode
• then rotate it back to the portrait mode

then a white space appears on the bottom of the screen. This space is not a part of the page html code. It is outside of the html tag.

Minimum reproducible example: https://jsbin.com/cojabiquza

This seems to be related to the Safari behaviour when it hides the address panel and the bottom panel when the device goes to the landscape mode. And when it goes back to the portrait mode the panels are shown again but the browser "forgets" to recalculate something and shows an extra space on the bottom of the page.

Deleting <meta name="viewport"... fixes it. But I can't get rid of it because I have a responsive website. In other browsers it works well.

Please share your experience if you know how to fix it.

解决方案

@Jax-p answer is valid for the bug I described but it causes another problem. When you use 100vh the content starts to be hidden behind the address bar:

So in my real life app I ended up with a bunch of hacks:

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);
});

This hack more or less fixes the problem in iOS Safari 12 and 13

这篇关于在iOS Safari中旋转设备后页面底部的空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！