Question

我有一个使用jquery mobile开发的移动webapp。我提示用户他们可以使用add to homescreen功能从桌面加载webapp。当我在我的iPhone 3GS上测试启动画面的功能时，我想加载的png文件没有加载启动画面，而是一个网站的“屏幕截图”，顶部有一个白色空格它似乎是地址栏。

这是我的代码

<html><head>

<title>Page Title</title>
<meta content='yes' name='apple-mobile-web-app-capable'> 
<meta content='default' name='apple-mobile-web-app-status-bar-style'> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.1.min.css" />
<link rel="stylesheet" type="text/css" href="css/mydashboard.min.css" />
<link rel="stylesheet" href="css/add2home.css">

<link rel="apple-touch-icon-precomposed" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="touch-icon-iphone4.png" />

<!-- ***Here is my code for splash screen*** -->
<link rel="apple-touch-startup-image" href="Default.png" />
<link rel="apple-touch-startup-image" href="touch-splash-ipad-land.png"  media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />
<link rel="apple-touch-startup-image" href="touch-splash-ipad-port.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />

<!-- ***My JS files are included under this and the closing of the head tag*** -->

我尝试过Default.png所在的320x460和320x480 png文件。两者都没有取得任何成功。从我所读到的，我认为我做得对，但我可能是错的。我的观点基于https://developer.apple.com/library/archive/qa/qa1588/_index.html 和 https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

所以我的问题是这个，还有其他人看过这个吗？如果是这样，原因是什么，如果您确实解决了问题，您采取了什么措施来解决问题？如果你还没有看到这个特殊问题，你可以根据我上面的代码建议吗？

Answer 1

Default.png 文件必须为320x460px。
尝试从主屏幕中删除启动器并从Safari重新添加它。

这是我必须做的才能让我的工作。

iPhone Webapp启动画面白色空间

1 个答案: