乐趣区

关于前端:不要用100vh做移动响应

jiezi

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 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 和欠缺，大家面试能够参照考点温习，另外关注公众号，后盾回复 福利，即可看到福利，你懂的。

退出移动版