关于uniapp不同平台下100vh单位的区别

Hia_amlx

3169人浏览 · 2023-06-08 16:07:03

Hia_amlx · 2023-06-08 16:07:03 发布

uni-app带来了诸多方便也带来各平台之间的差异。

在H5端css属性height: 100vh是相对于整个浏览器视口高度；

非H5平台则是减掉原生导航栏和原生tabbar的高度，因此会造成H5端出现垂直滚动条，非H5平台则正常显示的问题。

解决方案: 利用uniapp提供的条件编译，H5端使用100vh - 44px(原生导航栏高度)- 50px(原生tabBar高度)，非H5平台端则直接使用100vh即可。

代码示例：

.page{
    // #ifndef APP-PLUS
	height: calc(100vh - 44px - 50px); // 非APP平台下生效
	// #endif
	// #ifdef APP-PLUS
	height: calc(100vh);    // APP平台下生效
	// #endif
	background-color: #ededed;
}

华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

从需求到可执行工作项：MCP+Skill 让智能体规划真正落地

回顾整个体验，以前让智能体帮我拆需求，它是洋洋洒洒给我列了一大篇 Markdown，看着挺像那么回事，但最后还是得我一条条往 CodeArts Req 里搬，搬完再手动挂父子关系、排日期，拆需求五分钟，搬运两小时。现在好了，MCP 给智能体接上了"手"，Skill 给它装上了"项目经理的脑子"，一句话下去，34 个工作项连带排期、层级关系全给我建好了，甘特图一拉，齐刷刷都在两周内，节省了多少工作量

华为开发者空间

焕新鸿蒙应用权限管理方案，应用授权体验再升级

作为用户或应用开发者，或许经历过类似的体验场景：使用应用的过程中，触发应用某些功能会需要访问你的位置、麦克风、相机等常用权限，若为了保护隐私拒绝授权后，想要使用功能时，再次打开却找不到设置入口；或开启流程繁琐，需要经过频繁跳转和设置。这一问题不仅影响用户体验，还可能造成应用功能不可用、用户流失，也制约着应用的授权转化与留存表现，是行业普遍存在的体验痛点。