uni-app H5 在PC端 showModal显示异常，整体高度会拉的很大

uni-app H5 在PC端 showModal显示异常，整体高度会拉的很大

操作步骤：

  • PC运行就会出现

预期结果：

  • 正常显示

实际结果：

  • 高度异常

bug描述：

图片

Image 1 Image 2

信息类别 详细信息
产品分类 uniapp/H5
PC开发环境 Windows
PC开发环境版本 window 10
HBuilderX类型 Alpha
HBuilderX版本 4.52
浏览器平台 微信内置浏览器
浏览器版本 微信内置
项目创建方式 HBuilderX

更多关于uni-app H5 在PC端 showModal显示异常，整体高度会拉的很大的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

ipad可能也是这样异常的显示。

更多关于uni-app H5 在PC端 showModal显示异常，整体高度会拉的很大的实战教程也可以访问 https://www.itying.com/category-93-b0.html


https://hellouniapp.dcloud.net.cn/pages/API/modal/modal

回复 恭喜n发财: 可能不是同种东西

回复 2***@qq.com: 那你的代码是什么

回复 恭喜n发财: // 修复PC端showModal显示 @media (min-width:768px) { .uni-modal .uni-modalhd { padding: 0; .uni-modaltitle { height: 50rpx; margin-top: 40rpx; margin-bottom: 10rpx; } } }

这是一个常见的uni-app H5在PC端显示模态框(showModal)时出现高度异常的问题。主要原因是在PC端浏览器中，uni-app的模态框样式没有针对大屏幕做适配优化。

解决方案建议：

  1. 可以通过CSS强制设置模态框高度：
.uni-modal {
  max-height: 60vh !important;
  overflow-y: auto !important;
}
  1. 或者在使用showModal时，通过customStyle参数自定义样式：
uni.showModal({
  content: '提示内容',
  customStyle: {
    'max-height': '60vh',
    'overflow-y': 'auto'
  }
})
回到顶部