Mobile URL bar and footer bar 如何影响 height

从 2011 safari ios 6 开始出现这问题

比如当某个内容使用了 100vh, 在 URL bar 出现和隐藏时，高度会不一样

 

vh 行为开始改版

到了 2016 年，chrome mobile 56 开始固定了，不在依赖 URL bar

这里有 3 个概念

  1. vh (viewport height), 是 largest possible viewport (URL bar & footer nav hidden)
  2. ICB(Initial Containing Block), 是 smallest possible viewport (URL bar & footer nav show)
  3. fixed position 的 height percent 依据当下的 viewport (URL bar show and hidden 会改变 heigh)

 

vh 在手机遇到的问题

如果使用 100vh, 那么最下方的内容将会被 IOS safari 的 footer nav 给遮盖掉……

如果使用 vh 为单位，当 URL bar and footer nav 隐藏时，vh 单位会感觉不对，比如 top: 50vh 是中间，但实际上不是。

 

解决 vh 在手机的麻烦

JS set css custom variable

JS: window.innerHeight / 100 = --vh;

CSS: height: calc(--vh * 50); 

 

JS set body height

在 initial 后给 body 一个固定的高

手机游览器在第一次或 refresh 访问时，URL bar 一定会出现, 那么通过 window.innerHeight 拿到的就是 ICB 的高度

 

CSS：Nested css

把所有的 parents 都设置 100%

 

CSS: -webkit-fill-available

在能用的空间下，用足空间。目前 FIrefox 完全不兼容

语法 stretch 将会被替代 -webkit-fill-available

 

CSS media query

通过判断是什么手机，给固定的高度

 

总结

不同的需求需要不同的 work around, 目前没有依照打天下的方法

 

Links

 

posted @ 2021-09-02 12:24  泉油  阅读(83)  评论(0)  编辑  收藏  举报
Web Design Johor Bahru Malaysia - Stooges