iOS WebApp 不顯示啟動圖像 (iOS WebApp not showing startup image)

問題描述

iOS WebApp 不顯示啟動圖像 (iOS WebApp not showing startup image)

我添加了

<link rel="apple‑touch‑icon" href="favicon.png" />
<link rel="apple‑touch‑startup‑image" href="splash‑screen.png"/>
<meta name="apple‑mobile‑web‑app‑status‑bar‑style" content="black">

在我網站的head標籤之間，但它對啟動圖像不起作用這是正常的嗎？

參考解法

方法 1:

Are you trying to view the startup image in your desktop browser? If so then I would visit your website on an IOS mobile device and add the app to your homescreen. When you open it you should see the splash screen.

Splash screen are also tricky with different screen sizes. You can use the following code to ensure that it works.

        <!‑‑ IOS Touch Icons ‑‑>
        <link href="apple‑touch‑icon‑57x57.png" sizes="57x57" rel="apple‑touch‑icon">

        <link href="apple‑touch‑icon‑72x72.png" sizes="72x72" rel="apple‑touch‑icon">

        <link href="apple‑touch‑icon‑114x114.png" sizes="114x114" rel="apple‑touch‑icon">
        <link href="apple‑touch‑icon‑144x144.png" sizes="144x144" rel="apple‑touch‑icon">

        <!‑‑ iOS Startup images ‑‑>
        <link href="apple‑touch‑startup‑image‑320x460.png" media="(device‑width: 320px)" rel="apple‑touch‑startup‑image">
        <link href="apple‑touch‑startup‑image‑640x920.png" media="(device‑width: 320px) and (‑webkit‑device‑pixel‑ratio: 2)" rel="apple‑touch‑startup‑image">
        <link href="apple‑touch‑startup‑image‑768x1004.png" media="(device‑width: 768px) and (orientation: portrait)" rel="apple‑touch‑startup‑image">
        <link href="apple‑touch‑startup‑image‑748x1024.png" media="(device‑width: 768px) and (orientation: landscape)" rel="apple‑touch‑startup‑image">
        <link href="apple‑touch‑startup‑image‑1536x2008.png" media="(device‑width: 1536px) and (orientation: portrait) and (‑webkit‑device‑pixel‑ratio: 2)" rel="apple‑touch‑startup‑image">
        <link href="apple‑touch‑startup‑image‑2048x1496.png" media="(device‑width: 1536px)  and (orientation: landscape) and (‑webkit‑device‑pixel‑ratio: 2)" rel="apple‑touch‑startup‑image">

It is quite tedious to generate all of these images so I would use a tool to generate the different icon and splash screen images automatically.

One such tool would be http://ticons.fokkezb.nl/

方法 2:

This functionality appears to have been broken since iOS 9.

Although there hasn't been any official word, this thread (and the lack of response from Apple) suggests it is possibly a bug.

The official documentation (last updated December 2016) still lists the apple‑touch‑startup‑image feature so hopefully it will be fixed eventually.

(by Mathieu Nightown、Fintan Kearney、bvpb)

參考文件

1. iOS WebApp not showing startup image (CC BY‑SA 2.5/3.0/4.0)