本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。
一般来说,我们使用 height:100vh
进行全屏布局,这是一种很方便的响应式方法。
.content {
height: 100vh;
}
但当在实际设备上测试我们的设计时,我们遇到了几个问题。
已检测到滚动条问题。糟糕的用户滚动和难以浏览的内容。
注意:在Safari上测试了这个问题,它更加糟糕。
const documentHeight = () => {
const doc = document.documentElement
doc.style.setProperty('--doc-height', `${window.innerHeight}px`)
}
window.addEventListener(‘resize’, documentHeight)
documentHeight()
: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