我一直在尝试让我的网络应用程序在iOS设备上显示启动画面。当我将应用程序添加到主屏幕后加载应用程序时,会出现白屏并且没有任何内容加载。但是,如果我将meta标签移动到图标和启动画面下方,则应用程序将正常加载,但启动画面不会加载。无论代码放在哪里,图标都适用于所有设备。
以下是我目前的代码:
长的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"/>
<!--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!”。将其添加到主屏幕后,图标可以正常工作,但启动画面无法正常工作。