Forum Documentation Showcase Pricing Learn more

IOS Appearance - Startup Image


#1

Have anyone upload these images (Iphone 5 Start-up Image, Ipad portrait and Ipad Landscape image) and have succeeded?

These Images is supposed to fire while the web app is loading right?

Well, I tried on a Iphone and an Ipad and it doesn’t work. It still loading on a white screen, and is annoying for the end user.

@emmanuel the Icon for home screen is loading properly but not the other images in the “IOS Appearance”.


#2

That splash screen literally only works on iPhone 5 because of the way IOS handles splash screens

It is still possible by adding your own meta tags. It takes a bit of work but here are the instructions that helped me to do it. Essentially you need a meta tag for each screen size/iPhone version.


#3

This has been my experience as well.

Thank you for sharing @ryley.randall Very helpful :exploding_head:


#4

Thanks @ryley.randall, this helps although it seems a little bit confusing on how to relate this in Bubble.

So I have this meta tag in SEO/metatags:

<meta name="apple-mobile-web-app-capable" content="yes">

What I don’t figure out is where i should put the link refference to support custom splash screens. For example I am trying to put an image “/iphone6_spash.png” with the following code:

<link href="iphone6_splash.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

Any further advice will be very appreciated


#5

Hey Dan, in the settings of your app there is a section to add meta tags to the header. I put mine there.
Second, for your image source, you need to upload the image to bubble, then copy the link that is created and past it as the source in the meta tag.
Hope that helps!


#6

I tried in many different ways but it doesn’t work. Thanks


#7

You are still using the wrong url… it needs to be a full url starting with https:// put inside the quotes of href


#8

This worked @ryley.randall

Thank you :slight_smile:


#9

Looks like these don’t work for landscape mode.
(Tried just swapping the height/width around and creating same image but didn’t work. )

Also iPhone 5S is refusing to display any startup image either. Maybe app-capable doesn’t work for the iphone 5 line?


#10

The Iphone 5s is displaying correctly the Splash Screen if you put the script in the right place.

Have you export your image with the right dimenssions?

The landscape mode doesn’t work on the Ipad (at least for me; I have a third generation Ipad).


#11

I’m using:

link rel=“apple-touch-startup-image” media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href=“url”

is that what you have - 568 for height?

What do you mean the right place? It shouldn’t matter what order the meta tags are in.

It’s weird about landscape mode - would have thought it would be no problem having a start up image for that mode but looks like apple only let you add it when packaging up the webview and don’t let you put it in the meta for web apps.


#12

Actually just found this for portrait and landscape.

Will try it tomorrow.


#13

The recommended dimensions for the Iphone 5 are:
Width: 640 px
Height: 1136 px

You can’t fail with these.

Also, put this meta tag in your METAtags (from Settings):

<!-- iPhone 5 (640px x 1136px) -->
<link rel=“apple-touch-startup-image” media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="/apple-launch-640x1136.png">

Keep in mind to put the full url of the Splash Image starting with https:// inside the quotes of href.

I let you a link for further info:


#14

Thanks Dan, but the image is already 640px/1136 so I can fail with that!

It’s a mystery…


#15

Hmmm…

Every time you add a picture for a specific device in your metatags, in this case for the Iphone 5s, delete the PWA from your iPhone and install it again. (the button add to home screen from Safari)


#16

Yes I’ve been doing that too although I note that I don’t need to do that on my iPad, it just shows straight away.

I’ve also fooled around with image resolution (72ppi vs 143 ppi and smaller file size), I’m also making sure old images are deleted from file manager/dB, as well as clearing cache.

I think the link of the site I attached suggests a very different device height so I’ll try that tomorrow. It does feel like I have something wrong there, since all the other devices are showing (I’m lucky I have a whole stash of iOS test phones at work so not short of real phones to test on).