uni-app 打包时ios页面被缩放展示异常

uni-app 打包时ios页面被缩放展示异常

信息类别 详情
产品分类 uniapp/App
PC开发环境 Windows
PC版本号 Windows 10 教育版
HBuilderX 正式
HBuilderX版本号 3.1.22
手机系统 iOS
手机版本号 IOS 14
手机厂商 苹果
手机机型 iphoneXR
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

操作步骤：

项目发行打包之后就会出现这种情况，安卓版不会且已经上架应用市场

预期结果：

预期是页面展示完全，铺满

实际结果：

实际是页面缩放了，且只有在ios发行打包后出现，运行到手机自定义基座正常展示

bug描述：

运行到同一部手机的话页面展示完整， 运行到手机自定义基座展示正常，发行打包之后页面就缩放了

Image Image

App下载地址或H5网址：

https://service.dcloud.net.cn/build/download/c9c6a1f0-fa56-11eb-94d4-a5cba09d9e54


更多关于uni-app 打包时ios页面被缩放展示异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

第一次接触ios，不懂得发布测试的步骤，应该是直接用ipa安装的缘故 http://blog.applicationloader.net/blog/zh/88.html

更多关于uni-app 打包时ios页面被缩放展示异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


问题解决：是因为没有勾选启动页配置

这个问题通常是由于iOS的视口（viewport）配置不当导致的。以下是几个关键解决方案：

  1. 检查manifest.json配置： 在manifest.json的app-plus节点下添加以下配置：
"safearea": {
  "bottom": {
    "offset": "none"
  }
},
"launchwebview": {
  "id": "1",
  "useragent": "",
  "uni-app": "auto"
}
  1. 检查页面meta设置： 确保所有页面都正确设置了视口：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

  1. 检查CSS单位使用： 避免使用px等固定单位，推荐使用rpx或vw/vh等响应式单位。

  2. 检查页面结构： 确保页面最外层容器没有设置固定宽高，让页面能自适应屏幕。

  3. 尝试添加以下CSS：

page {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
回到顶部