通常, 我们通常在全屏布局使用 height:100vh,这种简单方便的方式可以获得更好的排版
例子
.content{
height:100vh;
}
但是当我们在实际的设备上测试我们的设计时, 我们会遇到一些问题
- 大部分移动端的chrome 和 Firefox, 在顶部有一个 UI(地址栏等)
- 在 Safari 浏览器的底部有一个棘手的地址栏
- 不同的浏览器有不同尺寸的视窗
- 移动设备计算 100vh 为浏览器的视窗尺寸(顶部栏 + 文档 + 底部栏)
- 整个文档使用 100vh 来填满页面
问题
- Chrome
会有滚动条的问题。不好的用户使用不流畅以及浏览内容很费劲
解决方法
- 使用 js 检测应用的
height
const documentHeight = () => {
const doc = document.documentElement
doc.style.setProperty('--doc-height', `${window.innerHeight}px`)
}
window.addEventListener(‘resize’, documentHeight)
documentHeight()
- 使用 css variable
:root {
--doc-height: 100%;
}
html,
body {
padding: 0;
margin: 0;
height: 100vh; /* fallback for Js load */
height: var(--doc-height);
}
这里, 函数 documentHeight 设置了包含当前窗口高度的 style 属性(var('--doc-height'))
最终结果(Chrome 浏览器)
Note: 这里在 Safari 工具栏上没有额外的垂直滚动条出现, 现在也没有这个问题。Safari 的底部地址栏总是在底部， 能够使用户在网站上使用的很流畅
结尾
说了这么多， 我希望你能够解决移动端的 viewport 问题。 所以， 我建议在你的项目里面尝试一下这个方案， 并且享受这个过程
请随意分享你的想法和意见，如果你有问题给我请留言
这篇文章翻译自 dev.to, 目的是用来练习自己的英语语法学习, 如果有翻译错误请在下面评论 原文地址
