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">

我网站的标题标签之间 但不适用于启动映像 这正常吗?

between the head tags of my website but it doesn't work for the startup image is this normal?

推荐答案

您是否要在桌面浏览器中查看启动映像?如果是这样，那么我将在IOS移动设备上访问您的网站，并将该应用添加到您的主屏幕.当您打开它时，您应该会看到初始屏幕.

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.

这样的工具之一就是 http://ticons.fokkezb.nl/

这篇关于iOS WebApp未显示启动图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！