uni-app 在qq浏览器打开h5页面时图片组件撑爆屏幕问题

uni-app 在qq浏览器打开h5页面时图片组件撑爆屏幕问题

开发环境 版本号 项目创建方式
Mac macOS HBuilderX

操作步骤：

<u--image v-bind="{ radius: '10rpx', width: '240rpx', height: '190rpx', mode: 'aspectFill' }" :fade-show="false" :src="imgErrorUrl"  /&gt;

预期结果：

图片按预期宽高展示

实际结果：

qq浏览器打开打开图片显示异常

bug描述：

手机系统鸿蒙3.0.0
app显示图片正常
手机的默认浏览器打开页面显示也正常

qq浏览器打开upniapp的h5页面问题：图片组件撑爆屏幕


更多关于uni-app 在qq浏览器打开h5页面时图片组件撑爆屏幕问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 在qq浏览器打开h5页面时图片组件撑爆屏幕问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中，当在 QQ 浏览器或其他移动浏览器中打开 H5 页面时，图片组件可能会撑爆屏幕。这通常是由于图片的尺寸超出了容器的宽度，或者没有正确设置图片的 max-width 和 height 属性导致的。以下是一些解决方案：

1. 使用 CSS 控制图片尺寸

你可以通过 CSS 来控制图片的最大宽度，确保图片不会超出其父容器的宽度。

img {
  max-width: 100%;
  height: auto;
}

2. 使用 uni-app 的 image 组件

在 uni-app 中，可以使用内置的 image 组件，并设置 mode 属性来控制图片的显示方式。

<template>
  <view>
    <image src="your-image-url" mode="widthFix"></image>
  </view>
</template>

mode="widthFix" 会使图片的宽度适应父容器的宽度，高度按比例自动调整。

3. 设置 image 组件的 style

你也可以直接在 image 组件上设置样式：

<template>
  <view>
    <image src="your-image-url" style="max-width: 100%; height: auto;"></image>
  </view>
</template>

4. 使用 flex 布局

如果图片的父容器使用了 flex 布局，确保图片不会超出容器的宽度：

<template>
  <view style="display: flex; justify-content: center;">
    <image src="your-image-url" style="max-width: 100%; height: auto;"></image>
  </view>
</template>

5. 检查 viewport 设置

确保在 index.html 中正确设置了 viewport，这有助于页面在移动设备上正确缩放：

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

6. 使用 uni-app 的 uni.css

如果你使用了 uni-app 的 uni.css，确保其中没有覆盖图片的默认样式。

7. 检查图片的原始尺寸

如果图片的原始尺寸过大，可能会导致在移动设备上显示异常。可以考虑在服务器端对图片进行压缩或调整尺寸。

8. 使用 background-image

如果你不需要直接使用 img 标签，可以考虑使用 background-image 来显示图片，并设置 background-size: cover 或 background-size: contain 来控制图片的显示方式。

<template>
  <view style="background-image: url('your-image-url'); background-size: cover; width: 100%; height: 200px;"></view>
</template>
回到顶部