hybrid-app开发模式中，关于导航栏的问题
背景
近日，在开发一个需求的过程当中，需要处理关于app中引入h5页面之后，出现的一部分样式问题，其中包含了关于导航栏。
问题
app内部存在导航栏，而我们的页面高度设置，是按照100vh去计算，导致我们真实h5页面中计算的高度被挡住了导航栏高度的部分，展示不全
分析
理解100vh，整个视口的高度。在app中，有些移动设备可能存在地址栏、导航栏等不固定的元素，这些元素会影响视口的高度，100vh 就会导致我们原本的布局出现问题。
解决方案
- 对接的app直接去掉导航栏，当然通过jsbrige通信即可，调用app的原生方法，来通知内部需要隐藏导航栏，然后我们自己的h5应用设计一个自身的导航栏。【推荐使用，最准确的】
- 如果app端不方便配合，我们可以根据css和js来操控布局，只在特定的ua（每个app有特定的use-agent）,执行特定的js逻辑（这里需要h5端大概取一个app导航栏的近似值），来控制布局。（这是博主最近使用的方案）
/** app 去掉app自身顶部的高度，近似值 */
if (/ua/i.test(navigator.userAgent)) {
const element = document.getElementById("root")
element.style.height = "calc(100% - xxpx)"
}
- 还有一种方案，不过比较麻烦，那就是让app内部通知我们他那边的导航栏高度（当然这里可以让app顺便将高度的单位转为px像素单位，供h5使用），我们内部的高度就是视口高度 - 导航栏高度
写在最后
其实呢，对于技术上来说，我们可以通过各种方案去实现想要达到的目的，不过找到适合自己的方案，那就是最好的方案。
如果有帮到大家，记得给博主点个赞，也欢迎大家评论留言，一起讨论技术！
原文地址：https://blog.csdn.net/qq_36579455/article/details/143605879
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！