CSS3 100vh在移动浏览器中不恒定

Question

我有一个非常奇怪的问题...在每个浏览器和移动版本中我遇到这种行为:

• 加载页面时所有浏览器都有一个顶级菜单(例如显示地址栏),当您开始滚动页面时,该菜单会向上滑动.
• 100vh仅在视口的可见部分计算,因此当浏览器栏向上滑动100vh时增加(以像素为单位)
• 所有布局都重新绘制并重新调整,因为尺寸已更改
• 对用户体验的糟糕跳跃效果

怎么能避免这个问题？当我第一次听到视口高度时,我很兴奋,我认为我可以将它用于固定高度块而不是使用javascript,但现在我认为唯一的方法是实际上javascript与一些resize事件......

您可以在以下位置查看问题:示例站点

任何人都可以帮我/建议一个CSS解决方案吗？

---

简单的测试代码:

/* maybe i can track the issue whe it occours... */
$(function(){
  var resized = -1;
  $(window).resize(function(){
    $('#currenth').val( $('.vhbox').eq(1).height() );
    if (++resized) $('#currenth').css('background:#00c');
  })
  .resize();
})

*{ margin:0; padding:0; }

/*
  this is the box which should keep constant the height...
  min-height to allow content to be taller than viewport if too much text
*/
.vhbox{
  min-height:100vh;
  position:relative;
}

.vhbox .t{
  display:table;
  position:relative;
  width:100%;
  height:100vh;
}

.vhbox .c{
  height:100%;
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}

<div class="vhbox" style="background-color:#c00">
  <div class="t"><div class="c">
  this div height should be 100% of viewport and keep this height when scrolling page
    <br>
    <!-- this input highlight if resize event is fired -->
    <input type="text" id="currenth">
  </div></div>
</div>

<div class="vhbox" style="background-color:#0c0">
  <div class="t"><div class="c">
  this div height should be 100% of viewport and keep this height when scrolling page
  </div></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 1

我们有新的视口单元lvh来svh救援dvh。最新的 Google I/O 2022 网络作品视频对此进行了演示。

您可能希望坚持让dvh浏览器在滚动时适应移动设备的隐藏选项卡。dvw对于具有,lvw和单位的宽度，其工作方式类似svw。

这是视频中的简洁插图：https://youtu.be/Xy9ZXRRgpLk?t=982

我可以用吗？

目前，这正在我的 Chrome 金丝雀上运行，并启用了“实验功能”标志。

Answer 2

不幸的是,这是有意的......

这是一个众所周知的问题(至少在safari mobile中),这是有意的,因为它可以防止其他问题.Benjamin Poulain回复了一个webkit错误:

这完全是故意的.我们需要花费大量的工作才能达到这个效果.:)

基本问题是:滚动时可见区域会动态变化.如果我们相应地更新CSS视口高度,我们需要在滚动期间更新布局.不仅如此看起来像狗屎,但在大多数页面中以60 FPS执行此操作几乎是不可能的(60 FPS是iOS上的基线帧速率).

很难向你展示"看起来像狗屎"的部分,但想象当你滚动时,内容会移动,你想要的在屏幕上不断移动.

动态更新高度不起作用,我们有几个选择:在iOS上删除视口单元,匹配iOS 8之前的文档大小,使用小视图大小,使用大视图大小.

根据我们的数据,使用更大的视图大小是最好的折衷方案.大多数使用视口单元的网站在大多数时候看起来很棒.

Nicolas Hoizey对此进行了相当多的研究:https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile -browsers.html

没有计划修复

此时,除了避免在移动设备上使用视口高度之外,您无能为力.移动Chrome似乎也想要适应这一点,尽管它不确定它们是否会贯彻执行.

Answer 3

您可以尝试min-height: -webkit-fill-available;使用CSS而不是100vh。应该解决

Answer 4

对我来说，这样的伎俩成功了：

height: calc(100vh - calc(100vh - 100%))

Answer 5

将身体位置设置为固定，将高度设置为 100%

body { position: fixed; height: 100% }

就是这样，然后手机浏览器就会明白你想要什么。

现在，无论是否有 URL 栏，或者是否有选项卡（如移动 Safari 中），主体都会随着浏览器的视图高度而增大或缩小。身体总是会得到完整的视野。

Answer 6

看看这个答案：https : //css-tricks.com/the-trick-to-viewport-units-on-mobile/

// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);

// We listen to the resize event
window.addEventListener('resize', () => {
  // We execute the same script as before
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
});

body {
  background-color: #333;
}

.module {
  height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
  margin: 0 auto;
  max-width: 30%;
}

.module__item {
  align-items: center;
  display: flex;
  height: 20%;
  justify-content: center;
}

.module__item:nth-child(odd) {
  background-color: #fff;
  color: #F73859;
}

.module__item:nth-child(even) {
  background-color: #F73859;
  color: #F1D08A;
}

<div class="module">
  <div class="module__item">20%</div>
  <div class="module__item">40%</div>
  <div class="module__item">60%</div>
  <div class="module__item">80%</div>
  <div class="module__item">100%</div>
</div>

Answer 7

对于我构建的许多网站,客户端将要求100vh横幅,正如您所发现的那样,当您开始滚动时,它会在移动设备上产生糟糕的"跳跃"体验.这就是我如何解决问题,以便在所有设备上获得平稳一致的体验:

我首先将我的横幅元素CSS设置为 height:100vh

然后我使用jQuery获取我的banner元素的高度(以像素为单位)并使用此高度应用内联样式.

var viewportHeight = $('.banner').outerHeight();
$('.banner').css({ height: viewportHeight });

这样做解决了移动设备上的问题,就像页面加载时一样,使用CSS将banner元素设置为100vh然后jQuery通过在我的banner元素上放置内联CSS来覆盖它,这会阻止用户开始滚动时调整大小.

但是,在桌面上如果用户调整其浏览器窗口大小,我的banner元素将不会调整大小,因为它现在具有由于上述jQuery而设置的固定高度(以像素为单位).为了解决这个问题,我使用Mobile Detect将"移动"类添加到文档正文中.然后我将上面的jQuery包装在if语句中:

if ($('body').hasClass('mobile')) {
  var viewportHeight = $('.banner').outerHeight();
  $('.banner').css({ height: viewportHeight });
}

因此,如果用户在移动设备上,则"我的页面"主体上会出现"移动"类,并执行上述jQuery.所以我的banner元素只会在移动设备上应用内联CSS,同时在桌面上原始的100vh CSS规则仍然存在.

Answer 8

在我的应用程序中,我这样做(打字稿和嵌套的postcss,所以相应地更改代码):

const appHeight = () => {
    const doc = document.documentElement
    doc.style.setProperty('--app-height', `${window.innerHeight}px`)
}
window.addEventListener('resize', appHeight)
appHeight()

在你的CSS中:

:root {
   --app-height: 100%;
}

html,
body {
    padding: 0;
    margin: 0;
    overflow: hidden;
    width: 100vw;
    height: 100vh;

    @media not all and (hover:hover) {
        height: var(--app-height);
    }
}

它至少适用于chrome mobile和ipad.什么不起作用是当您将应用程序添加到iOS上的主屏幕并更改方向几次 - 不知何故缩放级别与innerHeight值混淆,如果我找到解决方案,我可能会发布更新.

演示

Answer 9

您可以通过添加以下脚本和样式来做到这一点

  function appHeight() {
    const doc = document.documentElement
    doc.style.setProperty('--vh', (window.innerHeight*.01) + 'px');
  }

  window.addEventListener('resize', appHeight);
  appHeight();

风格

.module {
  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
}

Answer 10

这是您需要的技巧https://css-tricks.com/the-trick-to-viewport-units-on-mobile/。

的CSS

.my-element {
    height: 100vh;                      /* Fallback for browsers that do not support Custom Properties */
    height: calc(var(--vh, 1vh) * 100);
    transition: 1s;                     /* To avoid a jumpy result */
}

JS

// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;

// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);

// We listen to the resize event
window.addEventListener('resize', () => {

    // We execute the same script as before
    let vh = window.innerHeight * 0.01;
    document.documentElement.style.setProperty('--vh', `${vh}px`);
});

Answer 11

当我几天在寻找解决方案时，这里是我的每个人使用 VueJS 和 Vuetify（我的解决方案使用 v-app-bar、v-navigation-drawer 和 v-footer）：我创建了 App.scss（在 App.scss 中使用）。 vue) 具有以下内容：

.v-application {
    height: 100vh;
    height: -webkit-fill-available;
}

.v-application--wrap {
    min-height: 100vh !important;
    min-height: -webkit-fill-available !important;
}

Answer 12

您可以尝试position: fixed; top: 0; bottom: 0;为您的容器提供属性。

Answer 13

我想出了一个React组件– 检查您是否使用React或不使用它浏览源代码，以便可以使其适应环境。

它将全屏div的高度设置为window.innerHeight，然后在窗口调整大小时对其进行更新。

Answer 14

不幸的是，这个问题至今仍然存在。最大的误导是不可能通过使用浏览器的devices toolbar.

我刚刚解决了这个问题（在 PC、iOS 和 Android 浏览器上测试过）：

.your_class {
   height: 100vh,
   max-height: 100%, // <-- add the line
   ...some other props,
}

我希望它能节省您的时间。