uni-app 图片宽度设置730rpx边框宽度两边10rpx安卓屏幕横屏不全满

uni-app 图片宽度设置730rpx边框宽度两边10rpx安卓屏幕横屏不全满

操作步骤:

已上传

预期结果:

横屏铺满

实际结果:

css有问题

bug描述:

所有安卓手机都这样,不能宽度上全屏铺满,图片宽度730rpx,边框宽度两边各10rpx应该能铺满
h5没问题,ios没问题,全部安卓手机有问题

开发环境 版本号 项目创建方式
Windows win10 HBuilderX
Android Android 10 小米cc9e

Image

kuandubug.zip


更多关于uni-app 图片宽度设置730rpx边框宽度两边10rpx安卓屏幕横屏不全满的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 图片宽度设置730rpx边框宽度两边10rpx安卓屏幕横屏不全满的实战教程也可以访问 https://www.itying.com/category-93-b0.html


根据你的描述,问题在于安卓横屏下图片宽度(730rpx)加上边框(两边各10rpx,共20rpx)未能铺满屏幕。这通常与 rpx 在不同设备上的计算方式有关。

原因分析: rpx 是基于屏幕宽度的单位,750rpx 等于屏幕宽度。横屏时,屏幕宽度和高度互换,但部分安卓设备在横屏时 rpx 的计算基准可能仍以竖屏逻辑处理,导致实际宽度不足。

解决方案:

  1. 使用百分比或 vw 单位:将图片宽度设为 100%,边框用 box-sizing: border-box; 包含在内,确保总宽度不溢出。
    .image-container {
      width: 100%;
      padding: 0 10rpx;
      box-sizing: border-box;
    }
    .image {
      width: 100%;
    }
    
  2. 动态计算宽度:通过 uni.getSystemInfoSync() 获取屏幕宽度,动态设置图片宽度为屏幕宽度减去边框。
    const systemInfo = uni.getSystemInfoSync();
    const imageWidth = systemInfo.windowWidth - 20; // 减去20rpx边框
    
  3. 使用 calc() 函数:直接计算宽度为 100% - 20rpx,但注意兼容性。
    .image {
      width: calc(100% - 20rpx);
    }
回到顶部