共计 1049 个字符,预计需要花费 3 分钟才能阅读完成。
有幻想,有干货,微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 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 曾经收录,整顿了很多我的文档,欢送 Star 和欠缺,大家面试能够参照考点温习,另外关注公众号,后盾回复 福利,即可看到福利,你懂的。
正文完