uni-app iOS nvue页面定位有问题

uni-app iOS nvue页面定位有问题

项目信息 详细信息
产品分类 uniapp/App
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 11.6
HBuilderX类型 正式
HBuilderX版本号 3.2.3
手机系统 iOS
手机系统版本号 iOS 15
手机厂商 苹果
手机机型 iphonex、iphone6plus、iphone12
页面类型 nvue
打包方式 云端
项目创建方式 HBuilderX

示例代码：

position: absolute;
top: 20rpx;
bottom: 20rpx; //iPhone定位是错的，bottom: 20rpx 的定位远超出屏幕底部很多（iPad是好的）
right: 40rpx; //iPhone显示不出来，因为定位是错的（right: 40rpx 在屏幕外面去了），改成 right: 540rpx 才能显示出来一部分（iPad是好的）
width: 200rpx;

操作步骤：

  • iPhone的nvue定位使用bottom或right

预期结果：

  • 正确定位

实际结果：

  • 定位错误

bug描述：

  • iPhone的nvue定位有问题，bottom和right都超出屏幕很多；
  • iPad和Android是好的；

更多关于uni-app iOS nvue页面定位有问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

更多关于uni-app iOS nvue页面定位有问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


iphone 6s Plus测试如下，未复现您说的问题。你这边是什么机型？换其他设备是否正常？

3.2.3横屏启动的时候才能复现，刚试了3.2.9是正常的了

这是一个已知的iOS nvue渲染引擎兼容性问题，主要出现在iOS 15及部分机型上。问题根源在于iOS的WKWebView对CSS定位计算存在差异，尤其是在使用bottom和right属性结合position: absolute时。

解决方案：

  1. 避免使用bottom/right定位：改用top/left配合transform或通过计算屏幕尺寸动态设置位置。
  2. 使用uni.getSystemInfoSync()动态计算：
    const systemInfo = uni.getSystemInfoSync();
const right = systemInfo.windowWidth - 40 - 200; // 屏幕宽度 - right值 - 元素宽度
    在样式中使用计算后的left值。
  3. 使用flex布局替代绝对定位：如果结构允许，用flex实现类似效果更稳定。
  4. 升级HBuilderX到最新版本：3.2.3版本较旧，新版本可能已优化此问题。

临时修复示例：

<view :style="{ left: computedLeft + 'px', top: '20rpx', width: '200rpx', position: 'absolute' }"></view>

computed: {
  computedLeft() {
    return uni.getSystemInfoSync().windowWidth - uni.upx2px(40) - uni.upx2px(200);
  }
}
回到顶部