css – Flex-box 100vh延伸到移动safari chrome背后 – 有任何已知的技巧或解决方案

2019年7月28日 199次阅读

Flex-box 100vh延伸到移动safari chrome背后 – 是否有任何已知的技巧或解决方案？ – 或者它真是太好了吗？

《css – Flex-box 100vh延伸到移动safari chrome背后 – 有任何已知的技巧或解决方案》

我经常想要一个’模态’类型的封面div,或者一个简单的单键UI屏幕的全屏图像.我使用的弹性盒越多,我的旧技术就越少.当达到100％高度时,我通常会遇到的黑客攻击是：

html, body {
  height: 100%;
}

HTML和正文没有明确的高度……并且无法真正知道它们的高度.为了告诉任何孩子有多高,他们需要知道父母的身高.使用深层嵌套元素可能会非常混乱.

100vh视口高度将这种嵌套问题排除在外,但在移动浏览器上,对于如何发挥作用似乎存在差异.在iOS Safari中,vh会将其区域包含在它们位于底部的meddlesome UI栏下方.由于感知到的偏移,居中元素不会出现居中,当您尝试滚动内容时,所有内容都会被搞砸并且笨拙并且感觉破碎.

我可以使用modernizr来检查触摸,但这是一个不受欢迎的位置.在某些情况下,我可以为html和body 100％添加一个类,包括视图嵌套视图,但是当像flickity这样的东西注入许多子元素时,或者在MVC中有嵌套视图生成更多嵌套元素,将所有内容告知100％高度/并且触摸不是一致的度量是非常不可靠的,因为有触摸桌面等.

.element-with-background-image {
  width: 100%;
  height: 100vh;
  background-image: url(...);
  background-size: cover;
  background-position: center center;
}

这感觉就像我们应得的东西.他们在视口元标记上删除了我们的最大值.我只想制作一些不会破碎的东西.

死的简单例子：http://s.codepen.io/sheriffderek/pen/LWevrx
调试版本(在手机上测试)：http://s.codepen.io/sheriffderek/debug/LWevrx

滑块的更复杂示例：http://codepen.io/sheriffderek/pen/BWJEKJ
调试版本(在手机上测试)：http://s.codepen.io/sheriffderek/debug/BWJEKJ

做事位置：固定;似乎是没有故障的全面覆盖的唯一方法(通常直到最近才引起重大故障)

固定位置版本：http://codepen.io/sheriffderek/pen/XMVQOX
调试版本(在手机上测试)：http://s.codepen.io/sheriffderek/debug/XMVQOX

固定位置w滑块/需要获得窗口高度并将其添加到所有childred – 我能够想出的最佳解决方案：
http://codepen.io/sheriffderek/pen/RpxOzM
调试版本(在手机上测试)：http://s.codepen.io/sheriffderek/debug/RpxOzM

摘要

100vh不是我们可以在这样的情况下使用的东西吗？我应该把它拿出我的工具箱吗？或者 – 你有一套规则或技术可以让我把它留在我的生活中吗？

最佳答案 根据这篇文章,Chrome自版本56以来具有相同的行为.

https://developers.google.com/web/updates/2016/12/url-bar-resizing

Improved interoperability with Safari on iOS. The new model should match how Safari behaves, making life easier for web developers. The unintuitive choice of making vh units the largest possible viewport but the ICB the smallest possible is to match Safari’s behavior.

所以100vh在这种情况下不会帮助你(我).

点赞