ionic 基于ios系统配置启动页和logo

在ios系统中启动页和logo如果尺寸不对,整个页面中的字体是处于放大的状态的。怎么去解决这个问题,这边提供两个方案。

方案一:手动设置

1.安装插件

$ ionic cordova plugin add cordova-plugin-splashscreen
$ npm install --save @ionic-native/splash-screen

2.修改config.xml

<platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
        <icon height="57" src="src/assets/icon/logo.png" width="57" />
        <splash height="1136" src="src/assets/splash/640×1136.png" width="640" />
        <splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" />
        <splash height="2208" src="src/assets/splash/2208×1242.png" width="1242" />
        <splash height="1242" src="src/assets/splash/1242×2208.png" width="2208" />
        <splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" />
        <splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" />
 </platform>

3.修改xcode

去LauchImage选项中设置对应的分辨率启动页
启动页iOS图片尺寸:
iPhone Portrait iOS 8-Retina HD 5.5 (1242×2208) @3x  还有一个横屏 2208x1242
iPhone Portrait iOS 8-Retina HD 4.7 (750×1334) @2x

iPhone Portrait iOS 7,8-2x (640×960) @2x
iPhone Portrait iOS 7,8-Retina 4 (640×1136) @2x

iPhone Portrait iOS 5,6-1x (320×480) @1x
iPhone Portrait iOS 5,6-2x (640×960) @2x
iPhone Portrait iOS 5,6-Retina4 (640×1136) @2x

注意:config.xml中设置启动页的尺寸需要与xcode中设置的启动页尺寸一致(很重要,不然依旧字体会放大)

logo:尺寸
iphone notification ios7-10
base:20pt 需要 @2x, @3x 得出:40x40,60x60

iOS 5,6
base: 29pt, 需要 @1x, @2x, @3x,得出:29 x 29, 58 x 58, 87 x 87

iOS 7,8
base: 40pt, 需要 @2x, @3x,得出:80 x 80, 120 x 120

iPhone App
iOS 5,6
base: 57pt,需要 @1x, @2x, 得出:57 x 57, 114 x 114

iOS 7,8
base: 60pt,需要 @2x, @3x,得出:120 x 120, 180 x 180

怎么去设置:用xcode打开项目


分别点开该两项,将做好对应的尺寸logo和启动页拖拽进对应的方框中即可。注意:需要将选项Launch Screen File 置空。


方案二:ionic命令生成

1.准备一张logo和一张启动页,尺寸分别是icon.png(1024*1024),splash.png(2208*2208)。

2.重命名之后放入如下对应目录,覆盖原启动页和logo。


3.使用ionic命令 

ionic cordova resources

4.重新编译一次,再次打开xcode就能看到所有的尺寸都出来了。

阅读更多
个人分类: ionic
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

ionic 基于ios系统配置启动页和logo

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭