本文首发于微信公众号：大迁世界, 我的微信：qq449245884，我会第一工夫和你分享前端行业趋势，学习路径等等。
更多开源作品请看 GitHub https://github.com/qq449245884/xiaozhi ，蕴含一线大厂面试残缺考点、材料以及我的系列文章。
一般来说，咱们应用 height:100vh 进行全屏布局，这是一种很不便的响应式办法。
.content { height: 100vh;}但当在理论设施上测试咱们的设计时，咱们遇到了几个问题。
- 大部分挪动端的Chrome和Firefox浏览器在顶部都有一个UI（地址栏等）。
- 在Safari浏览器上，地址栏在底部，这就变得更加辣手了。
- 不同的浏览器有不同大小的视口
- 挪动设施计算浏览器视口为（顶栏+文档+底栏）=100vh
- 整个文档应用 100vh 填充到页面中
问题
谷歌
已检测到滚动条问题。蹩脚的用户滚动和难以浏览的内容。
留神：在Safari上测试了这个问题，它更加蹩脚。
解决方案
通过JS检测应用程序的高度
const documentHeight = () => { const doc = document.documentElement doc.style.setProperty('--doc-height', `${window.innerHeight}px`)}window.addEventListener(‘resize’, documentHeight)documentHeight()应用 css 变量
:root { --doc-height: 100%;}html,body { padding: 0; margin: 0; height: 100vh; /* fallback for Js load */ height: var(--doc-height);}最初后果
当初没有任何额定的垂直滚动条呈现，Safari也没有问题，这样的用户体验失去很大的晋升。
代码部署后可能存在的BUG没法实时晓得，预先为了解决这些BUG，花了大量的工夫进行log 调试，这边顺便给大家举荐一个好用的BUG监控工具 Fundebug。
作者：nirazanbasnet 译者：前端小智 起源：dev
原文：https://dev.to/nirazanbasnet/...
交换
有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。