logo标签列表

iOS Web应用启动画面无法加载

htmliossplash-screen
6
我一直在尝试让我的网络应用程序在iOS设备上显示启动画面。当我将应用程序添加到主屏幕后加载应用程序时，会出现白屏并且没有任何内容加载。但是，如果我将meta标签移动到图标和启动画面下方，则应用程序将正常加载，但启动画面不会加载。无论代码放在哪里，图标都适用于所有设备。
以下是我目前的代码：
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>


<!--iOS ICONS-->

<link href="https://baea7f48c88acedc0f88adbf93a90554fa064d59-www.googledrive.com/host/0B1QgF0628vPRfjZTZDQ5NE1Fb3J3bnlsLTJxVk93YmdiZlRDTzFPaXJoWnE1VFlWVlZPaVU/apple-touch-icon-120x120.png" 
  rel="apple-touch-icon" 
  sizes="120x120" />

<link href="https://baea7f48c88acedc0f88adbf93a90554fa064d59-www.googledrive.com/host/0B1QgF0628vPRfjZTZDQ5NE1Fb3J3bnlsLTJxVk93YmdiZlRDTzFPaXJoWnE1VFlWVlZPaVU/apple-touch-icon-152x152.png" 
  rel="apple-touch-icon" 
  sizes="152x152" />

 <link href="https://baea7f48c88acedc0f88adbf93a90554fa064d59-www.googledrive.com/host/0B1QgF0628vPRfjZTZDQ5NE1Fb3J3bnlsLTJxVk93YmdiZlRDTzFPaXJoWnE1VFlWVlZPaVU/apple-touch-icon-180x180.png" 
  rel="apple-touch-icon" 
  sizes="180x180" />


<!--iOS SPLASH SCREENS-->

<!--iPhone 5-->
<link rel="apple-touch-startup-image" 
  href="https://baea7f48c88acedc0f88adbf93a90554fa064d59-www.googledrive.com/host/0B1QgF0628vPRfjZTZDQ5NE1Fb3J3bnlsLTJxVk93YmdiZlRDTzFPaXJoWnE1VFlWVlZPaVU/Default-portrait@2x~iphone5.jpg"
  media="(device-width: 320px) and (device-height: 568px) 
        and (-webkit-device-pixel-ratio: 2)"/>

<!--iPad, Landscape-->
<link rel="apple-touch-startup-image" 
  href="https://baea7f48c88acedc0f88adbf93a90554fa064d59-www.googledrive.com/host/0B1QgF0628vPRfjZTZDQ5NE1Fb3J3bnlsLTJxVk93YmdiZlRDTzFPaXJoWnE1VFlWVlZPaVU/Default-Landscape~ipad.png"        
  media="(device-width: 768px) and (device-height: 1024px) 
        and (orientation: landscape) 
        and (-webkit-device-pixel-ratio: 1)"/>

<!--iPad retina, Landscape-->
<link rel="apple-touch-startup-image" 
  href="https://baea7f48c88acedc0f88adbf93a90554fa064d59-www.googledrive.com/host/0B1QgF0628vPRfjZTZDQ5NE1Fb3J3bnlsLTJxVk93YmdiZlRDTzFPaXJoWnE1VFlWVlZPaVU/Default-Landscape@2x~ipad.png"   
  media="(device-width: 768px) and (device-height: 1024px) 
        and (orientation: landscape) 
        and (-webkit-device-pixel-ratio: 2)"/>

长的href链接包含Google Drive链接的原因是我将网站放在Google Drive上进行测试。它基本上代表网站地址。 <--编辑--> 现在代码看起来像这样，我已经重命名了一些文件并将它们移动了位置。我注意到Google Drive的地址是不需要的。
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>

<!-- iPhone ICON -->
<link href="App Icon/apple-touch-icon-57x57.png" sizes="57x57" rel="apple-touch-icon">
<!-- iPad ICON-->
<link href="App Icon/apple-touch-icon-72x72.png" sizes="72x72" rel="apple-touch-icon">
<!-- iPhone (Retina) ICON-->
<link href="App Icon/apple-touch-icon-114x114.png" sizes="114x114" rel="apple-touch-icon">
<!-- iPad (Retina) ICON-->
<link href="App Icon/apple-touch-icon-144x144.png" sizes="144x144" rel="apple-touch-icon">

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

我尝试在任何设备上使用该应用程序时，图标都能正常工作。但是启动画面仍无法正常工作。

只有一个页面显示“HELLO WORLD!”。将其添加到主屏幕后，图标可以正常工作，但启动画面无法正常工作。

你想在哪个设备上加载它？ - hopkins-matt
@hopkins-matt iPad Air 2 和 iPod 5 - James Baker
1个回答
7
根据Marconi的答案在多个“apple-touch-startup-image”分辨率的iOS Web应用（特别是iPad）？中，尝试使用以下闪屏元标记代替：（您仍需要iPhone 6和6 Plus标记）
    <!-- iPhone SPLASHSCREEN-->
    <link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image">
    <!-- iPhone (Retina) SPLASHSCREEN-->
    <link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
    <!-- iPhone 5 (Retina) SPLASHSCREEN-->
    <link href="apple-touch-startup-image-640x1136.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
    <!-- iPad (portrait) SPLASHSCREEN-->
    <link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image">
    <!-- iPad (landscape) SPLASHSCREEN-->
    <link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image">
    <!-- iPad (Retina, portrait) SPLASHSCREEN-->
    <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">
    <!-- iPad (Retina, landscape) SPLASHSCREEN-->
    <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">

更新演示：

   <!-- iPad retina portrait startup image -->
   <link href="//placehold.it/1536x2008.png"
         media="(device-width: 768px) and (device-height: 1024px)
                and (-webkit-device-pixel-ratio: 2)
                and (orientation: portrait)"
         rel="apple-touch-startup-image">

   <!-- iPad retina landscape startup image -->
   <link href="//placehold.it/1496x2048.png"
         media="(device-width: 768px) and (device-height: 1024px)
                and (-webkit-device-pixel-ratio: 2)
                and (orientation: landscape)"
         rel="apple-touch-startup-image">

   <!-- iPad non-retina portrait startup image -->
   <link href="//placehold.it/768x1004.png"
         media="(device-width: 768px) and (device-height: 1024px)
                and (-webkit-device-pixel-ratio: 1)
                and (orientation: portrait)"
         rel="apple-touch-startup-image">

   <!-- iPad non-retina landscape startup image -->
   <link href="//placehold.it/748x1024.png"
         media="(device-width: 768px) and (device-height: 1024px)
                and (-webkit-device-pixel-ratio: 1)
                and (orientation: landscape)"
         rel="apple-touch-startup-image">

   <!-- iPhone 6 Plus portrait startup image -->
   <link href="//placehold.it/1242x2148.png"
         media="(device-width: 414px) and (device-height: 736px)
                and (-webkit-device-pixel-ratio: 3)
                and (orientation: portrait)"
         rel="apple-touch-startup-image">

   <!-- iPhone 6 Plus landscape startup image -->
   <link href="//placehold.it/1182x2208.png"
         media="(device-width: 414px) and (device-height: 736px)
                and (-webkit-device-pixel-ratio: 3)
                and (orientation: landscape)"
         rel="apple-touch-startup-image">

   <!-- iPhone 6 startup image -->
   <link href="//placehold.it/750x1294.png"
         media="(device-width: 375px) and (device-height: 667px)
                and (-webkit-device-pixel-ratio: 2)"
         rel="apple-touch-startup-image">

   <!-- iPhone 5 startup image -->
   <link href="//placehold.it/640x1096.png"
         media="(device-width: 320px) and (device-height: 568px)
                and (-webkit-device-pixel-ratio: 2)"
         rel="apple-touch-startup-image">

   <!-- iPhone < 5 retina startup image -->
   <link href="//placehold.it/640x920.png"
         media="(device-width: 320px) and (device-height: 480px)
                and (-webkit-device-pixel-ratio: 2)"
         rel="apple-touch-startup-image">

   <!-- iPhone < 5 non-retina startup image -->
   <link href="//placehold.it/320x460.png"
         media="(device-width: 320px) and (device-height: 480px)
                and (-webkit-device-pixel-ratio: 1)"
         rel="apple-touch-startup-image">
刚试了一下，但是出于某种原因它仍然不能工作。也许与它在Google驱动器上有关，但除此之外我不知道哪里可能出了问题。它只显示一个白屏，然后加载应用程序的主页。 - James Baker
好的，我刚刚尝试了一个谷歌驱动器的URL，但是出现了404错误。 - hopkins-matt
你试过我发布的其中一个URL还是另一个？ - James Baker
我尝试了您建议的几个不同版本的代码，但无法使其正常工作。我已在原始帖子中添加了一个链接，以便测试使用的页面。如果您有兴趣查看整个文件，我还添加了一个到我的Google Drive文件的链接。 - James Baker
@JamesBaker 我尝试了你闪屏页面link标签中的一个原始URL，但结果是404错误。我已经尝试了新的URL，但我认为你的主要问题可能是尺寸。我提供了一个可行的示例，你可以复制并粘贴它，看到一个闪屏图片。我建议你再次确认你的图片尺寸是否正确。 - hopkins-matt
谢谢，你发布的演示很有效。我查了一下图片的尺寸，你说得对，它们有点偏差，我从互联网上下载了一个模板，它稍微有些偏差。 - James Baker
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接