本文首发于微信公众号:大迁世界, 我的微信:qq449245884,我会第一时间和你分享前端行业趋势,学习途径等等。
更多开源作品请看 GitHub https://github.com/qq449245884/xiaozhi ,包含一线大厂面试完整考点、资料以及我的系列文章。
快来免费体验ChatGpt plus版本的,我们出的钱
体验地址:https://chat.waixingyun.cn
可以加入网站底部技术群,一起找bug.
一般来说,我们使用 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/dont-use-100vh-for-mobile-responsive-3o97
代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
交流
有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net