uni-app开发的h5项目运行在App里iOS设备高度显示异常

示例代码：

<view class="test"></view>  
.test {  
    position: fixed;  
    left: 0;  
    right: 0;  
    bottom: 0;  
    top: 0;  
    background-color: lawngreen;  
}

操作步骤：

iOS模拟器运行uniapp的App，使用nvue全屏web-view加载uniapp的h5项目；

预期结果：

希望能使iOS模拟器和iOS手机设备webview的h5全屏展示

实际结果：

uniapp运行iOS模拟器的webview没有全屏展示uniapp-h5
uniapp运行iOS设备的webview偶现没有全屏展示uniapp-h5

bug描述：

使用uniapp开发的h5项目运行在uniapp开发的App里时，h5的页面高度不对，底部多了空白；
iOS模拟器必现（iPhone12 iOS15.5），iOS手机偶现（iPhone12 mini iOS15.4），安卓手机未发现。
如附件图：
app端使用nvue页面设置了web-view高度和宽度为满屏，加载uniapp h5链接。加载结果h5内容只在上部分window区显示，底部多了空白区。h5端页面通过uni的API方法uni.getSystemInfo()获取了windowHeight小于screenHeight，就是差了空白区的高度（iOS手机设备获取的大部分时候windowHeight等于screenHeight，偶现windowHeight小于screenHeight）。

htzhanglong 1楼•8 天前

目前解决方法是手动改body的高度，把默认height: 100% 改为height: 100vh 即可。在App.vue样式里写入以下代码 /deep/.uni-body {
height: 100vh;
}

caililin 2楼•8 天前

应用设置 safearea 配置为none

h691938207 3楼•8 天前

好的，我试试。先问下这个是配置到App项目里还是h5项目里呀，配置完会影响到获取safeareaInsets的值吗

yibo5220 4楼•8 天前

试了没效果呢，是在app-plus下配置吧？

yuanlaile 5楼•8 天前

两个项目设置了都没效果呢

caililin 6楼•8 天前

在使用 uni-app 开发 H5 项目并运行在 iOS 设备上时，可能会遇到高度显示异常的问题。这通常是由于 iOS 设备的视口（viewport）设置、安全区域（Safe Area）或 CSS 样式问题导致的。以下是一些常见的解决方案：

1. 检查视口设置

确保在 index.html 中正确设置了视口（viewport）标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

viewport-fit=cover 可以帮助处理 iOS 设备的刘海屏和底部安全区域。

2. 处理安全区域（Safe Area）

iOS 设备有安全区域的概念，特别是在刘海屏设备上。你可以使用 CSS 的 env() 和 constant() 函数来处理安全区域。

body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

3. 使用 `vh` 单位

在 iOS 设备上，100vh 可能会包含浏览器的地址栏和工具栏，导致实际内容区域高度不准确。你可以使用 window.innerHeight 来动态设置高度：

document.documentElement.style.setProperty('--vh', `${window.innerHeight}px`);

然后在 CSS 中使用 var(--vh)：

.container {
  height: calc(var(--vh, 1vh) * 100);
}

4. 检查 CSS 样式

确保你的 CSS 样式没有导致高度异常。例如，检查是否有 height: 100% 或 min-height: 100vh 等样式，并确保它们的行为符合预期。

5. 使用 `uni-app` 提供的 API

uni-app 提供了一些 API 来处理设备信息和安全区域。你可以使用 uni.getSystemInfoSync() 获取设备信息，并根据需要调整布局。

const systemInfo = uni.getSystemInfoSync();
const safeArea = systemInfo.safeArea;

6. 调试工具

使用 Safari 的开发者工具来调试 iOS 设备上的 H5 页面，查看元素的布局和样式，找出问题所在。

7. 使用 `@media` 查询

针对 iOS 设备，你可以使用 @media 查询来应用特定的样式：

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  /* 针对 iPhone X 的样式 */
}

8. 使用 `uni-app` 的 `page` 组件

确保你的页面使用了 uni-app 的 page 组件，它已经处理了一些常见的布局问题。

<template>
  <view class="page">
    <!-- 页面内容 -->
  </view>
</template>

<style>
.page {
  height: 100vh;
}
</style>