App端启动封面图拉伸需分平台处理:安卓必须用.9.png并规范定义拉伸区与内容区,iOS必须严格按Assets.xcassets填入各倍率图;页面内图片拉伸属WebView层问题,与原生启动图无关,须用mode="widthFix"+固定容器布局;alwaysShowBeforeRender应保持true防闪白屏。

App端启动封面图拉伸不是图片分辨率问题,而是原生层渲染机制不匹配导致的——安卓必须用 .9.png,iOS 必须走 Assets.xcassets,两者都不能靠“换张高清图”解决。
安卓端必须用 .9.png,否则必拉伸
直接把 1080×1920 的 PNG 放进 resources/android/splash,中低端机型上几乎一定拉伸。原因:Android 系统默认对整张图做等比缩放,不识别内容区域。
- 必须用
draw9patch.bat(Android SDK 自带)或在线工具(如https://romannurik.github.io/AndroidAssetStudio/nine-patches.html)生成.9.png - 上下黑线定义水平可拉伸区,左右黑线定义垂直可拉伸区;右下角黑框必须精确圈出 logo / 文字所在区域,否则会被压缩变形
- 原始图不能带透明边距、白边或裁剪留空——这些都会被
.9.png拉伸逻辑误判为“可拉伸内容” -
manifest.json中"display": "portrait"必须与图实际方向一致;横屏设备要额外提供横版.9.png并设为"display": "landscape"
iOS 端不能放 PNG 到 splash 目录
把图片丢进 resources/ios/splash 是无效的,打包后会被忽略或强制拉伸。iOS 启动图只认 Assets.xcassets 结构。
- 路径必须是
nativeResources/ios/Assets.xcassets/LaunchImage.launchimage - 按规范填入各倍率图:
@1x、@2x、@3x,尺寸必须严格对应(例如 iPhone SE(2nd) 要 640×1136 @2x,iPhone 14 Pro Max 要 1290×2796 @3x) - 别碰
LaunchScreen.storyboard—— UniApp 默认不走 storyboard,除非你手动替换原生工程 - 审核被拒写“启动图不符合规范”,90% 是尺寸漏填或未覆盖边界机型
App 端页面内图片拉伸和启动图无关
很多人以为改 <image mode="..."> 就能统一解决,结果 H5 正常、小程序留黑边、App 端照旧拉伸——这是混淆了两个层级:启动图是原生层,<image> 是 WebView 层。
- App 端页面内图片防拉伸,优先用
mode="widthFix"+ 固定容器宽高 +flex: 1布局,避免高度塌陷触发 X5 内核强制缩放 - H5 可加条件编译
#ifdef H5用object-fit: contain,但 App 端无效 - 微信小程序若容器高度固定(如
height: 400rpx),mode="aspectFit"必然留白;此时改用mode="scaleToFill"+overflow: hidden更可控
alwaysShowBeforeRender 设错会导致“假性拉伸”
启动图本身没拉伸,但首页一出来就白一下,用户感知就是“图变了形”。这不是图片问题,而是关闭时机错乱。
- 保持
"alwaysShowBeforeRender": true(默认值),确保首页 Vue 渲染完成再关启动图 - 如果设为
false,首页 JS 加载完就关,DOM 还没挂载,必然闪白屏——尤其在低端 Android 上更明显 - 云打包时,修改
.9.png或Assets.xcassets后必须重新云构建,本地开发基座不会自动更新
最易被忽略的一点:安卓和 iOS 的启动图配置完全独立,改完一边不等于另一边也生效;真机测试必须分设备、分渠道(云打包 vs 本地打包)交叉验证,不能只看模拟器或某一台手机。


















