CSS3中的100vh在移动浏览器中不是常量。
CSS3中的100vh在移动浏览器中不是常量。
我有一个非常奇怪的问题...在我遇到的每个浏览器和移动版本中都出现了这种行为：\n
- \n
- 所有浏览器在加载页面时都有一个顶部菜单（例如显示地址栏），当您开始滚动页面时，菜单会向上滑动。
- 有时候，100vh只计算视口中可见部分的高度，因此当浏览器菜单滑动时，100vh会增加（以像素为单位）。
- 所有布局都会重新绘制和调整，因为尺寸发生了改变。
- 用户体验会受到不好的跳动效果的影响。
\n
\n
\n
\n
\n如何避免这个问题？当我第一次听说视口高度时，我很兴奋，我以为我可以用它来替代使用JavaScript来固定高度的块，但现在我认为唯一的方法实际上是使用带有一些调整大小事件的JavaScript...\n您可以在这里看到问题：示例网站\n有人可以帮我解决/建议一个CSS解决方案吗？\n
\n简单的测试代码：\n
/* 可能我可以在出现问题时追踪问题... */
$(function(){
var resized = -1;
$(window).resize(function(){
$('#currenth').val( $('.vhbox').eq(1).height() );
if (++resized) $('#currenth').css('background:#00c');
})
.resize();
})
\n
*{ margin:0; padding:0; }
/*
这是应该保持高度不变的框...
min-height允许内容比视口更高，如果文本太多
*/
.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;
}
\n
这个div的高度应该是视口的100％，并且在滚动页面时保持这个高度
这个div的高度应该是视口的100％，并且在滚动页面时保持这个高度
CSS3 100vh在移动浏览器中不一致的原因是因为在某些移动设备上，使用100vh单位时，页面元素的高度可能不会随着浏览器视口的高度变化而变化。这可能导致页面元素在移动设备上显示不正确。
解决这个问题的方法是使用新的视口单位lvh、svh和dvh。其中，dvh单位适用于移动设备的隐藏选项卡，能够在滚动时自动适应其高度。类似地，使用dvw、lvw和svw单位可以实现宽度的自适应。
这个问题在Chrome浏览器的Canary版本中已经得到解决，并且即将在Chrome 108版本中发布。可以在此处查看更新信息：bugs.chromium.org/p/chromium/issues/detail?id=1093055。从2022年12月开始，我们可以放心地使用dvh单位了。
需要注意的是，在iOS 16.3上，使用dvh单位可能会导致页面元素的动画效果不流畅。虽然视口高度会平滑变化，但具有100dvh属性的元素在动画完成时才会更新其高度。
截至2023年2月，建议仍然使用回退方案（例如height: 100vh; height: 100dvh;）来确保在不支持新视口单位的浏览器上正常显示。可以在caniuse.com/viewport-unit-variants上查看更多信息。
新的视口单位对于创建全屏的头部/介绍块（使用svh）或模态弹窗的背景（使用dvh）非常有用。
根据作者的测试，截至2023年5月，100svh单位在移动浏览器中可以正常工作。
通过使用新的dvh、lvh和svh视口单位，可以解决CSS3 100vh在移动浏览器中不一致的问题，并且可以根据移动设备的隐藏选项卡或滚动来自动适应页面元素的高度。尽管在某些情况下可能会存在一些问题，但通过使用回退方案可以确保在不支持新视口单位的浏览器上正常显示。
CSS3中的100vh在移动浏览器中并不是恒定的，这可能会导致一些问题。有人建议可以尝试使用min-height: -webkit-fill-available;来代替100vh，这样问题就可以解决了。但是也有人表示，在不支持-webkit-fill-available的情况下，最好还是保留min-height: 100vh;作为备用方案。这是因为在某些浏览器上（至少在桌面上，iOS不管用什么浏览器都使用webkit），如果不保留min-height: 100vh;，页面会出现问题。但是这种解决方法在Android Chrome上会导致键盘弹出后页面高度仍然较小的问题。此外，某些情况下在iOS 13中，这种解决方法似乎出现了问题，第一个区块底部出现了额外的空白，但在iOS 12.x的Safari中却能正常工作。另外，某些情况下自Chrome v84开始，不再支持-webkit-fill-available。还有人指出，这种方法在移动设备键盘弹出时无法重新计算高度。还有人指出，这种方法还考虑了边框的大小并进行了减去，非常有用。还有人表示，使用Bootstrap4的vh-100类和height: 100vh样式可以解决问题。还有人询问是否可以在这种情况下使用calc来计算高度。但也有人表示这种解决方法没有作用。解决这个问题的方法是使用min-height: -webkit-fill-available;代替100vh，并保留min-height: 100vh;作为备用方案，但要注意在Android Chrome上可能会有键盘相关的问题，并且在iOS 13上可能会出现额外的空白。
CSS3中的100vh在移动浏览器中不是恒定的，这是一个已知的问题，而且是故意的，因为它可以防止其他问题。这是Webkit的一个bug，通过更新布局来动态更改CSS视口高度会导致问题。为了解决这个问题，他们选择使用较大的视口高度作为最佳折衷方案。大多数使用视口单位的网站在大多数情况下都表现良好。
对于这个问题，目前没有什么可以做的，除了在移动设备上避免使用视口高度。Chrome在2016年也改变了这个行为，具体信息可以在这两个链接中找到。
除此之外，还有一些其他解决方法，比如使用脚本编写解决方案，或者设置包含固定宽度项的容器的flex-wrap属性为wrap。
最近的Chrome版本在初始加载后不再更改vh或html的高度。这样做的好处是，当URL栏隐藏时，布局抖动/重排会显得很糟糕。但是，Firefox和Edge Mobile仍然会动态更新vh和html的高度，导致滚动时所有组件的撕裂和调整大小，特别是使用SVG作为背景图像时效果更差。
总之，这个问题在移动浏览器中仍然存在，并且没有一个完美的解决方案。最好的解决方法可能是在页面的第一个部分使用100%作为高度，并在其他部分使用100vh。
此外，还有一个PostCSS插件可以修复这个问题。
虽然这个问题在移动浏览器中仍然存在，并且没有一个完美的解决方案，但我们可以根据具体情况选择不同的解决方法来尽量减少影响。